直接上步骤：

生成一个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

最新文章

1. 快速入门系列--WCF--02消息、会话与服务寄宿
2. POJ 2236 Wireless Network（并查集）
3. 使用OneNote的COM组件，实现OCR功能。
4. Java数据库连接——JDBC调用存储过程,事务管理和高级应用
5. response小结（一）——用response向客户端输出中文数据（乱码问题分析）
6. csu 10月 月赛 J 题
7. oracle导出数据显示出现ora-00109或者LRM-00109出错修改办法
8. c/c++ extern “C”
9. kafka副本机制之数据可靠性
10. lodash源码分析之缓存方式的选择
11. AbstractQueuedSynchronizer AQS框架源码剖析
12. gulp配置（编译压缩转码自动刷新注释全）
13. 20175205 2018-2019-2 《Java程序设计》第五周学习总结
14. CentOS7 安装并配置MySQL8.0
15. 【JS】Js对json的转换
16. Theano教程：Python的内存管理
17. 线性代数与Python
18. JTopo使用心得
19. C#——图片操作类简单封装
20. Javascript设计模式理论与实战：组合模式

热门文章

1. August 28th 2016 Week 36th Sunday
2. Oracle BFILE备忘
3. java删除被占用的文件
4. python基础——map/reduce
5. 二、JavaScript语言--JS动画--JS动画效果
6. 无废话ExtJs 入门教程十一[下拉列表：Combobox]
7. gcc参数-l传递顺序错误导致`undefined reference&#39;的一点小结
8. git 打标签并推送tag到托管服务器
9. Oracle里SID、SERVICE_NAME
10. hdu 4028 2011上海赛区网络赛H dp+map离散