标签：lin show weight end 小结 parse ext raw containe
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/
效果图：
标签：lin show weight end 小结 parse ext raw containe
原文地址：https://www.cnblogs.com/LiuL123-321/p/9937625.html
