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.效果图

 

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

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

上一篇:echarts模拟highcharts实现折线图的虚实转换


下一篇:Spark Streaming性能调优详解