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