ChartJS/高图表雷达图-悬停时出现的每个类别的不同径向轴标签

Question

我想知道是否可以对每个类别的径向轴进行不同的标记，这些标记只有在悬停在值上时才会出现。也许最容易用一个例子来解释。因此，在这张图中；英语"；标记的范围是50-100，当我悬停在轴上的一个值上时，它会弹出

雷达图轴1

然后我想发生的是当我悬停在"；行为；例如，类别是要显示的类别的径向轴标签，它们的标签不同。

雷达图轴2

我知道这可能很难(或不可能(做到，但在ChartJS或HighCharts中有没有一种创造性的方法可以做到这一点？

谢谢！

Answer 1

这在Highcharts中是可能的。您只需要找到一个通用比例，使用多个y轴和模拟标签以及工具提示值，例如：

var yLabels = [
[60, 70, 80, 90, 100],
['Average', 'Satisfactory', 'Good', 'Excellent', 'Outstanding']
];
Highcharts.chart('container', {
yAxis: [...],
xAxis: {
lineWidth: 0,
tickmarkPlacement: 'on',
categories: ['English', 'Behaviour', 'Physics', 'Chemistry', 'Biology', 'History']
},
tooltip: {
shared: true,
formatter: function() {
var points = this.points,
returnStr = this.x;
points.forEach(function(point) {
returnStr += (
'<br />' + point.series.name + ': ' + yLabels[point.point.x][point.y - 1]
);
});
return returnStr;
}
},
plotOptions: {
series: {
point: {
events: {
mouseOver: function() {
this.series.chart.yAxis[this.x].update({
labels: {
enabled: true
}
});
},
mouseOut: function() {
this.series.chart.yAxis[this.x].update({
labels: {
enabled: false
}
}, false);
}
}
}
}
},
...
});

---

现场演示：http://jsfiddle.net/BlackLabel/82dyogrp/

API参考：

https://api.highcharts.com/highcharts/pane

https://api.highcharts.com/highcharts/yAxis

https://api.highcharts.com/highcharts/tooltip.formatter