折线图和柱状图读取 json值
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Xian.aspx.cs" Inherits="报表测试.Xian" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title></title>
<link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="js/highcharts.js"></script> <script src="js/highcharts-more.js"></script> <script src="js/modules/exporting.js"></script>
<script type="text/javascript"> var chart; $(function () {
chart = new Highcharts.Chart({ chart: { renderTo: 'container', defaultSeriesType: 'line', backgroundColor: '#f7f8ec', plotBorderWidth: 1, plotBackgroundColor: '#ffffff', shadow: true, borderRadius: 10 , plotShadow: true }, exporting: { enabled: false }, title: { text: '盐城市信访趋势', x: -20 }, xAxis: { categories: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] }, yAxis: { title: { text: '' }, plotLines: [{ value: 0, width: 1, color: '#808080' }] }, tooltip: { formatter: function () { return '<b>' + this.series.name + '</b><br/>' + this.x + ': ' + this.y; } }, plotOptions: { line: { dataLabels: { enabled: true }, enableMouseTracking: false } }, series: [] }); $.ajax({ url: "Handler2.ashx", cache: false }).success(function (data) { for (i = 0; i < data.length; i++) chart.addSeries(data[i]); }); }) </script> </head> <body> <form id="form1" runat="server"> <div id="container" style="width: 100%; height: 200px; margin: 0 auto"></div> </form> </body> </html>