Question

我正在尝试更改极坐标图的每个片段的背景颜色。为背景设置单一颜色很容易，但是可以为每个极地饼设置不同的颜色吗？

以下图表细分的一个例子是8种不同的颜色：

http://www.highcharts.com/demo/polar

由于

Answer 1

据我所知，在API中没有简单的方法可以做到这一点。

我将提供一个解决方案，利用chart.renderer为极坐标图的每个切片绘制一种颜色：

var colors = [ "pink", "yellow", "blue", "red", "green", "cyan", "teal", "indigo" ];    
var parts = 8;

for(var i = 0; i < parts; i++) {
    chart.renderer.arc(chart.plotLeft + chart.yAxis[0].center[0], 
                       chart.plotTop + chart.yAxis[0].center[1], 
                       chart.yAxis[0].height, 
                       0, 
                       -Math.PI + (Math.PI/(parts/2) * i), 
                       -Math.PI + (Math.PI/(parts/2) * (i+1))).attr({
        fill: colors[i % colors.length],
        'stroke-width': 1,
        'opacity': 1
    }).add();
}

点击this JSFiddle link查看即时演示。

使用renderer.arc使用chart关于中心和轴高的信息绘制每个切片。使用以弧度给出的起始和结束角度绘制弧。可以使用colors数组对各种切片进行着色，并且可以使用parts变量控制切片的数量。

如果有多个部分而不是颜色，则当colors数组的颜色用尽时，它将从colors[i % colors.length]开始使用{{1}}。

Answer 2

您可以添加带有不同颜色点的伪列系列，并将yAxis.maxPadding设置为0：

chart: {
polar: true,
events: {
  load: function() {
    var chart = this,
      max = chart.yAxis[0].max;
    chart.addSeries({
      type: 'column',
      data: [{
        y: max,
        color: 'rgba(255, 255, 0, 0.2)'
      }, {
        y: max,
        color: 'rgba(255, 0, 255, 0.2)'
      }, {
        y: max,
        color: 'rgba(0, 255, 255, 0.2)'
      }, {
        y: max,
        color: 'rgba(255, 0, 0, 0.2)'
      }, {
        y: max,
        color: 'rgba(0, 255, 0, 0.2)'
      }, {
        y: max,
        color: 'rgba(0, 0, 255, 0.2)'
      }, {
        y: max,
        color: 'rgba(130, 70, 150, 0.2)'
      }, {
        y: max,
        color: 'rgba(0, 0, 0, 0.2)'
      }],
      pointPadding: 0,
      groupPadding: 0,
      zIndex: 0,
      showInLegend: false,
      enableMouseTracking: false,
      animation: false
    })
  }
}
},

yAxis: {
  maxPadding: 0
},

jsFiddle：https://jsfiddle.net/BlackLabel/tsj9pomq

API参考：https://api.highcharts.com/highcharts/series.column https://api.highcharts.com/highcharts/yAxis.maxPadding

Highcharts极坐标图：多窗格段颜色

2 个答案: