zoukankan      html  css  js  c++  java
  • 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

  • 相关阅读:
    70.BOM
    69.捕获错误try catch
    68.键盘事件
    523. Continuous Subarray Sum
    901. Online Stock Span
    547. Friend Circles
    162. Find Peak Element
    1008. Construct Binary Search Tree from Preorder Traversal
    889. Construct Binary Tree from Preorder and Postorder Traversal
    106. Construct Binary Tree from Inorder and Postorder Traversal
  • 原文地址:https://www.cnblogs.com/pengzhen/p/4832834.html
Copyright © 2011-2022 走看看