highcharts组件使用经验分享

Highcharts 是一个用纯JavaScript编写的一个图表库， 可以或许很简单便捷的在web网站或是web应用法式添加有交互性的图表，HighCharts撑持的图表类型有曲线图、区域图、柱状图、饼状图、散状点图和综合图表，今天给大师介绍趋向图的开辟案例。

东西/原料

• 网页开辟编纂器

方式/步调

1. 1

   新增前台呈现htm界面，引入highcharts.js，可以新增一个div用来呈现趋向图，可以限制div样式的高度宽度等属性，保举个写法，如下图所示。

   
2. 2

   界说一个DrawCombinationChart的js方式，这个体例是给你挪用，呈现趋向图利用，具体的方式如下图，也可以去官方下载，有需要介绍方式的参数意思，

   以免同窗犯含混，ele代表领受的控件，上一个步奏让你界说了一个DIV的ID就是了，x代表横坐标的值，Y代表纵坐标的值，title代表题目。

   
3. 3

   后台处置，挪用可以利用一般处置法式，或者其他良多体例，这里不做保举，按照现实来，这里利用ajax与一般处置法式演示，如下图所示。

   
4. 4

   下面是后台数据层处置，注重数据格局，这里重点做下申明，后台的数据json参数如下图具体介绍。

   
5. 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. 6

   运行法式，趋向图呈现处置，新手注重将后台数据与前台数据进行对比，熟悉数据取值。

   

注重事项

• 完整的本身写一个案例，你就把握，注进修兴奋。