Highcharts 中数据列的颜色是通过 来指定的,colors 是个颜色值数组,默认是:

共有 10个默认颜色,你可以修改颜色值或增加颜色个数来自定义图表数据列颜色。

数据列调用颜色的方式是第 n 个数据列使用第 n 个颜色数组里的值,当序列的数量超过颜色数组的长度,后续的序列将会从头调用。

在线试一试

柱形图(包括柱状图、条形图等)里一组柱形颜色是一样的,很多人对此表示不理解

通过代码我们知道,一组柱形是属于同一个数据列的,所以他们的颜色当然时一样的。

你可能想到下面的这种方法:

这是在上一节“数据列”中说到的颜色赋值方式,用这种方法虽然可以实现想要的效果,但是如果分别对每个数据列赋值,显然不合理。

颜色 - 图3

Highcharts 直接提供对柱形图同数据列设置颜色,属性是:

colorByPoint 决定了图表是否给每个数据列或每个点分配一个颜色,默认值是 false, 即默认是给每个数据类分配颜色,设置为 true 则是给每个点分配颜色。

在线试一试

通过搜索 API 文档可以知道其他图表也可以用到 colorByPoint 这个属性

  • bar
  • columnrange
  • heatmap
  • treemap
  • waterfall

图表中所有文字都设置字体、颜色等样式,一般是通过 style.color 来设置文字颜色的,style 里可以用的属性如下所示:

下面列举图表中常见文字的配置位置:

  • 标题样式:title.style 及 subtitle.style
  • 坐标轴标签样式:xAxis.lables.style 及 yAxis.lables.style
  • 图例文字样式:legend.itemStyle
  • 数据提示框文字样式:tooltip.style
    图表中任何文字都是可以精准控制,如需设置,请自行在API文档上搜索