highcharts 是否可以使用纯CSS来控制highchart极坐标图(series.type=column)中每个区域的颜色?

5t7ly7z5  于 2022-11-10  发布在  Highcharts
关注(0)|答案(2)|浏览(151)

我的期望:

代码和演示:
第一个

svmlkihl

svmlkihl1#

这个应该可以
第一个

um6iljoc

um6iljoc2#

最简单的方法是启用colorByPoint选项并定义colors数组:

colors: ['#2f7ed8', '#0d233a', '#8bbc21', '#910000', '#1aadce', '#492970', '#f28f43', '#77a1e5', '#c42525', '#a6c96a'],
  plotOptions: {
    column: {
      ...
      colorByPoint: true
    }
  },
  ...

现场演示:http://jsfiddle.net/BlackLabel/5h09mwy2/
API参考:

https://api.highcharts.com/highcharts/colors
https://api.highcharts.com/highcharts/series.column.colorByPoint
如果您只需要通过CSS执行此操作,则可以用途:

.highcharts-series-0 path:nth-child(1) {
  fill: red;
}

.highcharts-series-0 path:nth-child(2) {
  fill: orange;
}

.highcharts-series-0 path:nth-child(3) {
  fill: yellow;
}

现场演示:http://jsfiddle.net/BlackLabel/8cmv2edz/

相关问题