标签：

?

?

直接上步骤：

?

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

ASP.NET MVC中使用highcharts 生成简单的折线图

标签：

原文地址：http://www.cnblogs.com/pengzhen/p/4832834.html