Текст на круге SVG
Я пытаюсь показать цвет 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
}]
}]
});
Подскажите пожалуйста, что именно нужно сделать, чтобы решить эту проблему
Ответы 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
Привет, @Mohit, Highcharts не предоставляет функции для расчета позиций dataLabels этого типа диаграммы, поэтому вы должны сделать это самостоятельно. Вы можете начать с: jsfiddle.net/BlackLabel/f6g1p72v
Как рассчитать координаты X и Y в dataLabels, если у нас есть динамическое значение данных