HighCharts 面积图图表图案填充

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

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

需求： 需要绘制一个图案填充的面积图

分析： 首先需要引入填充图表的js文件（pattern-fill.js），然后在选项设置（plotOptions）里进行设置fillColor. Pattern.path里进行设置，接着数据列也进行设置，具体设置请看源码

解决：

源代码:

示例

面积图图表图案填充以上表为例进行总结：

面积图填充

1. 首先引入pattern-fill.js

2. 在plotOptions选项里进行面积图配置

3. 填写fillColor属性，进行SVG路径（d:）、填充线条、透明度（opacity）设置

4. 在数据列（series）里进行填充颜色配置

SVG路径书写规范

M = moveto(M X,Y) ：将画笔移动到指定的坐标位置

L = lineto(L X,Y) ：画直线到指定的坐标位置

H = horizontal lineto(H X)：画水平线到指定的X坐标位置

V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置

C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线

S = smooth curveto(S X2,Y2,ENDX,ENDY)：平滑曲率

Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线

T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射

A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线

Z = closepath()：关闭路径

• M：画笔起始位置

• L：画直线（x，y）坐标

• Z：自动闭合

• fill： 填充颜色

• stroke：描边颜色

• stroke-width：描边宽度

• transform="translate(x,y)": 加了描边后需要平移（x=stroke-width/2, y=stroke-width/2）