HighCharts 对数折线图+可变宽度的柱形图

要使用 Higcharts 最快学会的方法，就是拿着官网给我们的例子，加以分析和修改。

兼容 IE6+、完美支持移动端、图表类型丰富的 HTML5 交互图表 | Highcharts

需求：生成一个对数折线图和一个能根据数据改变x轴方向宽度的柱状图

分析: 生成对数折线图在轴上使用type: 'logarithmic'属性即可生成，tickInterval（刻度线的间隔（以轴为单位）,在对数轴上，tickInterval 基于幂），可变宽度的柱状图需先导入variwide.js文件，然后在图表类型type中填写type: 'variwide'来进行改变。

解决：

源代码:

柱状图示例：

我们可以看到在轴属性里面添加一个type: 'logarithmic'属性就可以实现一个对数折线图，导入variwide.js文件，然后在图表类型type中填写type: 'variwide'来进行功能实现。

HighCharts 对数折线图+可变宽度的柱形图上面两表为例进行总结：

1、对数折线图

1）添加两轴（X轴：xAxis，Y轴：yAxis）

2) 在两轴中添加type:’ logarithmic’进行实现

2、可变宽度的柱状图

1）引入variwide.js文件

2）设置图表类型type：variwide补充数据生成可变宽度的柱状图

3）使用colorByPoint可以从全局方面改变柱子颜色，不需要自己在自己设定颜色更加方便快捷。