Highcharts繪制曲線圖小結
阿新 • • 發佈:2018-11-10
exp text port ber 維數 list raw ges 6.2
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/
效果圖:
Highcharts繪制曲線圖小結