303°

Highcharts绘制曲线图小结

Higcharts绘制曲线图很好用!

虽然说Highcharts官网有API,还有例子,但是我相信只看那些例子并不能很好的绘制出理想的曲线图。

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

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

主要js代码:

 1 function DrawShow() {
 2     $.getJSON(
 3         '/Draw/StRvavR',
 4         {BeginTime: beginTime.value, EndTime: endTime.value },
 5         function (data) {
 6             var jsonData = data.list;          
 7             //声明一个一维数组
 8             var arr = new Array(jsonData.length);  
 9             //给数组赋值 ,赋值后成了二维数组           
10             for (var i = 0; i < jsonData.length; i++) {
11                 var m = jsonData[i].IDTM;
12                 var n = m.replace("/Date(", "").replace(")/", "");
13                 14                 arr[i] = [parseInt(n), jsonData[i].AVZ];
15             }              
16            // var weight = $("#SelectPadding option:selected").val();           
17             var chart = Highcharts.stockChart('container', {
18                 rangeSelector: { selected: 1 },
19                 title: { text: '河道水情走势图' },
20                 series: [{
21                     name: '平均水位',
22                     data: arr,
23                     type: 'spline',
24                     tooltip: {
25                         valueDecimals: 1
26                        
27                     }
28                 }]
29             });
30         });        
31 }

 这里告诉大家一个陷阱请注意时间戳的使用时间戳是一个number类型,请不要用“”包括丢到数组里面,比如arr=[[“1496275200000”,1.45],...] 这样是不行的。

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

  我的script引用:

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

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

效果图:

@*<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>

原文链接:https://www.cnblogs.com/LiuL123-321/p/9937625.html

全部评论: 0

    我有话说: