Highcharts繪製曲線圖小結
阿新 • • 發佈:2018-11-09
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 varn = 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/
效果圖: