ASP.NET MVC中使用highcharts 生成簡單的折線圖

 

 

直接上步驟：

 

生成一個options，選項包含了一些基本的配置，如標題，座標刻度，serial等；

配置X軸顯示的Category數據，爲一個數組；

配置Y軸顯示的數據，也爲一個數據；

用生成option構建一個Hightcharts對象，便可以自動畫出一個折線圖了；

 

 

1.配置BundleConfig

 

1. bundles.Add(new ScriptBundle("~/bundles/jquery").Include("~/Scripts/jquery-{version}.js", "~/Scripts/jquery.metadata.js"));
2. bundles.Add(new ScriptBundle("~/bundles/highcharts").Include("~/Scripts/hightcharts/highcharts-custom.js"));

 

2.視圖模板

 

1. @Scripts.Render("~/bundles/highcharts")
2.  
3. <script type="text/javascript">
4.     $(function () {
5.         var option = option = getOption("container", '@ViewBag.titletext');
6.         //生成兩個serial
7.         option.xAxis.categories = @Html.Raw(@ViewBag.categories)
8.         option.series[0].data = @ViewBag.amount
9.         option.series[1].data = @ViewBag.quantity
10.         option.subtitle.text = '@ViewBag.subtitle'
11.  
12.         chart = new Highcharts.Chart(option);
13.  
14.         $("text:contains('銷售數量')").trigger('click');
15.     });
16.  
17.     function getOption(container, title) {
18.         var options = {
19.             chart: {
20.                 renderTo: container,
21.                 type: 'line'
22.             },
23.             title: {
24.                 text: title
25.             },
26.             subtitle: {
27.                 text: 'imc'
28.             },
29.             xAxis: {
30.                 title: {
31.                     text: '日期'
32.                 }
33.             },
34.             yAxis: {
35.                 title: {
36.                     text: '數量或金額'
37.                 },
38.                 min: 0, // 定義最小值
39.             },
40.             plotOptions: {
41.                 line: {
42.                     dataLabels: {
43.                         enabled: true
44.                     }
45.                 }
46.             },
47.             tooltip: {
48.                 shared: true, //共享數據提示框
49.             },
50.             credits: {
51.                 enabled: false
52.             },
53.             series: [{
54.                 name: "銷售金額"
55.             }, {
56.                 name: "銷售數量"
57.             }]
58.         }
59.  
60.         return options;
61.     }
62.  
63. </script>

 

3.後臺代碼

1. categories = "['" + string.Join("','", list.Select(zw => zw.DTStr)) + "']";
2. quantity = "[" + string.Join(",", list.Select(zw => zw.Quantity)) + "]";
3. amount = "[" + string.Join(",", list.Select(zw => zw.Amount)) + "]";
4.  
5. ViewBag.titletext = title;
6. ViewBag.categories = categories;
7. ViewBag.quantity = quantity;
8. ViewBag.amount = amount;
9. ViewBag.subtitle = subtitle;

 

4.效果圖

 

5.參考資料

 

中文教程與資料：http://www.hcharts.cn/docs/index.php?doc=basic-axis

示例：http://www.cnblogs.com/TivonStone/p/3539766.html

更多的charts插件：http://www.cnblogs.com/chu888chu888/archive/2012/12/22/2828962.html