Highcharts绘制曲线图小结

Higcharts绘制曲线图很好用！

虽然说Highcharts官网有API

刚接触这个领域，学有心得，理解不到位之处希望大家多多指教！

项目绘制的曲线是：平均水位随时间的变化而改变的水情走势图。

主要js代码：

 function DrawShow() {
     $.getJSON(
         '/Draw/StRvavR',
         {BeginTime: beginTime.value, EndTime: endTime.value },
         function (data) {
             var jsonData = data.list;
             //声明一个一维数组
             var arr = new Array(jsonData.length);
             //给数组赋值 ，赋值后成了二维数组
             for (var i = 0; i < jsonData.length; i++) {
                 var m = jsonData[i].IDTM;
                 var n = m.replace("/Date(", "").replace(")/", "");
                 
14                 arr[i] = [parseInt(n), jsonData[i].AVZ];
             }
            // var weight = $("#SelectPadding option:selected").val();
             var chart = Highcharts.stockChart('container', {
                 rangeSelector: { selected: 1 },
                 title: { text: '河道水情走势图' },
                 series: [{
                     name: '平均水位',
                     data: arr,
                     type: 'spline',
                     tooltip: {
                         valueDecimals: 1

                     }
                 }]
             });
         });
 }

这里告诉大家一个陷阱：请注意时间戳的使用时间戳是一个number类型，请不要用“”包括丢到数组里面，比如arr=[[“1496275200000”,1.45],...] 这样是不行的。时间戳的排序应该是从小到大，即升序，不然有错误的。

用到的插件：请到Higcharts官网下载：https://www.hcharts.cn/download

　　我的script引用：

         @*<script src="~/Scripts/Highcharts-6.2.0/code/highcharts.js"></script>
 Highcharts + Highstock 时只需要引入 highstock.js*@
         <script src="~/Scripts/Highstock-6.2.0/code/highstock.js"></script>
         <script src="~/Scripts/Highcharts-6.2.0/code/modules/exporting.js"></script>
         <script src="~/Scripts/Highcharts-6.2.0/code/highcharts-3d.js"></script>
         <script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>　　

Higcharts官网：https://www.hcharts.cn/

效果图：