highCharts入门

highCharts组成部分如下：

一、面积图

做面积颜色渐变(配置fillColor里面stops颜色值)：plotOptions:{ area: { fillColor: { } } }

x轴数据显示(xAxis里面categories数组里面每个值为x轴值)：xAxis: { categories: [ ] ｝

在绘制点上面显示提示文字(tooltip)：

y轴数据(series: [ { data: [ ] } ])

控制各种事件(series: [ { events: [ ] } ])：

 

1、数据配置

2、HighCharts.chart('file-chart', this.fileChartOption);

     调用highCharts方式（第一个参数是html里面highCharts绑定的id名，第二个参数为配置值）

 

 

3、如果需要x轴显示的日期格式化

我需要年月，所以取了前两个

图例位置需要改变(legend)：如上图签约数量需要图例是在下方，我改变成了右上方。

解决改变数据时图表却不变化问题：

注意，改变数据必须重新渲染图表，在vue中：

中jq中：