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]}]],这个是数据案例。