本次学习主要记录使用hightCharts绘制图形时如何设置配置项以达到自己需要的图形样式：
1. 除去 绘制图形自带的背景色
2. 修改坐标轴刻度标尺样式
3. 指定所绘制图形的颜色
1、 除去 绘制图形自带的背景色
相对比较简单，只需要在 chart配置项中，设置backgroundColor的颜色为rgba，透明度为0即可。
chart: {
backgroundColor: 'rgba(0,0,0,0)',
type: 'pie'
},
下面三张图是未设置backgroundColor时的代码及效果图：
此时注意 —— div的背景颜色是黑色，但是绘制出的图自带白色背景，会覆遮住原本块级元素的颜色。
图1 html代码
图2 js部分代码
图3 效果图接着是添加backgroundColor属性后：
图4 添加属性后的代码部分
图5 添加属性后的效果图2、修改坐标轴刻度标尺样式
因为highcharts默认的坐标轴刻度标尺字体样式是黑色，这在里，我们可以通过修改坐标轴配置项（xAxis/yAxis）中的 labels 里的style进行修改。
labels:{
style :{
color:'yellow'
}
}
下面根据下老规矩，先上个没有添加这个配置项的代码图和效果图
图6 未添加配置项的代码
图7 未添加配置项的运行效果
然后送上添加配置项后的代码，代码和效果如下图所示
图8 添加配置项后的代码
图9 为了方便看出对比我用了红色和黄色3、指定所绘制图形的颜色
highcharts绘制图形时，会按照自己默认的颜色对折线图、条形图、柱状图等进行绘制，但是有时候我们的背景图颜色很很深或者会和配色审美上不能达到自己想要的效果。这个时候我们可以自行修改需要的颜色。只需要在绘图代码中添加并填写color配置项，即可。
下面给出直接修改的上方的demo展示在柱形堆积图上指定绘图颜色的效果。
此刻在配置项中添加你想要的颜色就可以了（为了方便查看效果，我选了最简单的几个颜色进行展示）：
图10 指定绘图颜色的代码
图11 指定绘图颜色效果图可参考的官方链接地址：点击打开官网实例
指定的颜色，绘制图形时，会按照开发者给出的颜色顺序以及数据配置项中的数据顺序进行绘制图。代码中，红色排在第一个位置、蓝色在第二位置，数据项中先给出的series1 后给出的series2，所以 seriies1 是红色，series2是蓝色。
综上是我学习使用highCharts绘制图形时，在一些需要配合我所需要的样式或色彩搭配情况下，学习小结。
网友评论