highcharts組件使用經驗分享

Highcharts 是一個用純JavaScript編寫的一個圖表庫，可以或許很簡單便捷的在web網站或是web應用法式添加有交互性的圖表，HighCharts撐持的圖表類型有曲線圖、區域圖、柱狀圖、餅狀圖、散狀點圖和綜合圖表，今天給大師介紹趨向圖的開辟案例。

東西/原料

1
新增前臺呈現htm界面，引入highcharts.js，可以新增一個div用來呈現趨向圖，可以限制div樣式的高度寬度等屬性，保舉個寫法，如下圖所示。
2
界說一個DrawCombinationChart的js方式，這個體例是給你挪用，呈現趨向圖利用，具體的方式如下圖，也可以去官方下載，有需要介紹方式的參數意思，
以免同窗犯含混，ele代表領受的控件，上一個步奏讓你界說了一個DIV的ID就是了，x代表橫坐標的值，Y代表縱坐標的值，title代表題目。
3
后臺處置，挪用可以利用一般處置法式，或者其他良多體例，這里不做保舉，按照現實來，這里利用ajax與一般處置法式演示，如下圖所示。
4
下面是后臺數據層處置，注重數據格局，這里重點做下申明，后臺的數據json參數如下圖具體介紹。
5
此刻演示個后臺數據例子，"CHARTX":{"X":["201708","201709","201710","201711","201712","201801","201802","201803","201804","201805","201806","201807"],"XCOMMENT":["1","2","3","4","5","6","7","8","9","10","11","12"]},"CHARTY":[[{"PK":"2018年造紙廠運行信息趨向圖","name":"FIST_XIAN","yAxis":0,"type":"line","data":[2.00,9.00,15.00,9.00,25.00,78.00,71.00,2966.00,13812.00,null,null,null]}]],這個是數據案例。
6
運行法式，趨向圖呈現處置，新手注重將后臺數據與前臺數據進行對比，熟悉數據取值。