Highcharts - 实心仪表的颜色编码图例

Question

我正在尝试使用 highcharts 实心仪表，我想要一个图例，但是 Highcharts 开发人员似乎已经从实心仪表系列中删除了颜色选项，我相信这是传说从中提取颜色的原因。

series: [{
      name: 'Move',
            borderColor: Highcharts.getOptions().colors[0],
            color: Highcharts.getOptions().colors[0],
            data: [{
                color: Highcharts.getOptions().colors[0],
                radius: '100%',
                innerRadius: '100%',
                y: 80
            }],
            showInLegend:true
        }, {
            name: 'Exercise',
            borderColor: Highcharts.getOptions().colors[1],
            color: Highcharts.getOptions().colors[1],
            data: [{
                color: Highcharts.getOptions().colors[1],
                radius: '75%',
                innerRadius: '75%',
                y: 65
            }],
            showInLegend:true
        }, {
            name: 'Stand',
            borderColor: Highcharts.getOptions().colors[2],
            color: Highcharts.getOptions().colors[2],
            data: [{
                color: Highcharts.getOptions().colors[2],
                radius: '50%',
                innerRadius: '50%',
                y: 50
            }],
            showInLegend:true
}]

Jsfiddle

有没有办法让我的图例与系列颜色相匹配？

Answer 1

我一直无法弄清楚如何为图例中的标记着色，但对我来说，无论如何标记在这种情况下没有意义。所以，我已经在我的 fiddle 中关闭了它们。

要为文本着色，您可以使用图例 labelFormatter 函数。

legend: {
  labelFormatter: function() {
    return '<span style="text-weight:bold;color:' + this.userOptions.color + '">' + this.name + '</span>';
  },
  symbolWidth: 0
},

http://jsfiddle.net/9dq2p7dw/21/