今天看了幾位大佬的博客，學到了一些，現在分享一下，也作為以後的參考 不多說看代碼 1.後臺代碼 定義了實體類，來接收數據 前臺也很簡單 ga感覺這種是最簡單的，全部數據都是從後臺綁定，前臺只負責展示，也是看了好多大佬的文章，才學到的。 下載鏈接：http://pan.baidu.com/s/1skO ...
今天看了幾位大佬的博客，學到了一些，現在分享一下，也作為以後的參考
不多說看代碼
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, width: 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
