Текст на кружке 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