今天看了几位大佬的博客，学到了一些，现在分享一下，也作为以后的参考
不多说看代码
1.后台代码
public ActionResult Ajax2() { ReportData reportData = new ReportData(); string[] key = { "2017-08-01", " 2017-08-02", "2017-08-03", "2017-08-04", "2017-08-05", "2017-08-06", "2017-08-07", "2017-08-08", " 2017-08-09", "2017-08-10", "2017-08-11", "2017-08-12" }; reportData.categories = key; double?[] value = { 3.9, 4.6, 5.7, 10.5, 1.9, 15.2, 15.0, 16.6, 19.2, 10.0, 5.2, 46.8 }; double?[] value1 = { 3.9, 3.6, 5.7, 8.5, 1.9, 15.2, 12.0, 16.6, 12.2, 10.0, 5.1, 46.8 }; ReportItem ri1 = new ReportItem() { data = value, name = "Agent Used" }; reportData.ReportItems.Add(ri1); ReportItem ri2 = new ReportItem() { data = value1, name = "Emission" }; reportData.ReportItems.Add(ri2); return Json(reportData); }
定义了实体类，来接收数据
public class ReportData { public string[] categories { get; set; } public List<ReportItem> ReportItems = new List<ReportItem>(); } public class ReportItem { public string name { get; set; } public double?[] data { get; set; } }
前台也很简单
@{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/charts/highcharts/exporting.js"></script> <script src="~/charts/highcharts/highcharts.js"></script> <script src="http://github.highcharts.com/master/modules/no-data-to-display.src.js"></script> <script src="~/charts/highcharts/highcharts_jquery-1.8.3.min.js"></script> </head> <body> <div id="container"> </div> </body> </html> <script type="text/javascript"> $(document).ready(function () { $.ajax({ url: "/Home/Ajax2", type: "post", dataType: 'json', async: false, //同步处理后面才能处理新添加的series success: function (data) { columnBasic(data.categories, data.ReportItems); } }); }); function columnBasic(categories, series) { var chart = new Highcharts.Chart('container', { title: { text: '不同城市的月平均气温', x: -20 }, subtitle: { text: '数据来源: WorldClimate.com', x: -20 }, xAxis: { categories: categories//['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'] }, yAxis: { title: { text: '温度 (°C)' }, plotLines: [{ value: 0, 1, color: '#808080' }] }, tooltip: { valueSuffix: '°C' }, legend: { layout: 'vertical', align: 'right', verticalAlign: 'middle', borderWidth: 0 }, series: series }); } </script>
ga感觉这种是最简单的，全部数据都是从后台绑定，前台只负责展示，也是看了好多大佬的文章，才学到的。
下载链接：http://pan.baidu.com/s/1skOrBQX