英文:
ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover
问题
我想知道是否可能为每个类别标记不同的径向轴，在悬停在值上方时仅显示出来。可能最容易通过示例来解释。所以在这张图片中，“英语”的标记范围是50-100，在我悬停在该轴上的某个值时会弹出。
然后，当我悬停在“行为”类别上时，我想要发生的是该类别的径向轴标签会显示出来，并且这些标签会有不同的标记。
我知道这可能很难（或不可能）做到，但在ChartJS或HighCharts中是否有创造性的方式可以实现这一点呢？
谢谢！
英文:
I'm wondering if it's possible to label the radial axis' for each category differently which appear only when hovering over a value. Probably easiest to explain with an example. So in this picture, the "English" marks have a range of 50 -100 which pops up when I hover over one of the values on that axis
What I then want to happen is when i hover over the "Behaviour" category for example is the radial axis labels for that category to show up which are labelled differently.
I know this might be difficult (or impossible) to do but is there a creative way in ChartJS or HighCharts where this might be possible?
Thanks!
答案1
得分: 0
这在 Highcharts 中是可能的。您只需要找到一个共同的刻度，使用多个 y 轴，并模拟标签和工具提示的值，例如：
var yLabels = [
[60, 70, 80, 90, 100],
['平均', '令人满意', '良好', '优秀', '卓越']
];
Highcharts.chart('container', {
yAxis: [...],
xAxis: {
lineWidth: 0,
tickmarkPlacement: 'on',
categories: ['英语', '行为', '物理', '化学', '生物', '历史']
},
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
英文:
This is possible with Highcharts. You need to only find a common scale, use multiple y-axis and mock labels and tooltip values, for example:
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);
}
}
}
}
},
...
});
Live demo: http://jsfiddle.net/BlackLabel/82dyogrp/
API Reference:
https://api.highcharts.com/highcharts/pane
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论