SVG圈上的文字

Question

我正尝试显示SVG颜色，如上图所示

这是JSfiddle https://jsfiddle.net/3cx6mLy0/。

我可以创建颜色，但文本不显示

series: [{
        name: 'Move',
        data: [{
            color:  '#FF0000',
            radius: '112%',
            innerRadius: '65%',
            y: 60
        }]
    }, {
        name: 'Exercise',
        data: [{
            color: 'green',
            radius: '112%',
            innerRadius: '65%',
            y: 20
        }]
    }]
});

能否请您告诉我解决此问题的确切方式

Answer 1

您可以使用dataLabels和legend属性来获得所需的结果：

  plotOptions: {
      solidgauge: {
          ...,
          dataLabels: {
              formatter: function() {
                  var series = this.series.chart.series,
                      index = this.series.index;

                  if (index !== series.length - 1) {
                      return (this.y - series[index + 1].points[0].y) + '%'
                  }
                  return this.y + '%'
              }
          }
      }
  }

实时演示： https://jsfiddle.net/BlackLabel/ay5mbfew/

API参考：

https://api.highcharts.com/highcharts/plotOptions.series.dataLabels.enabled

https://api.highcharts.com/highcharts/plotOptions.series.showInLegend