ChartJS/High 图表雷达图 - 悬停时显示的每个类别的不同径向轴标签

Question

我想知道是否可以对每个类别的径向轴进行不同的标记，这些类别仅在将鼠标悬停在某个值上时才会出现。可能最容易用一个例子来解释。所以在这张图片中，“英语”标记的范围是 50 -100，当我将鼠标悬停在该轴上的一个值上时会弹出

Radar chart axis 1

然后我想要发生的事情是，当我将鼠标悬停在“行为”类别上时，例如显示该类别的径向轴标签，标签不同。

Radar chart Axis 2

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

谢谢！

Answer 1

Highcharts 可以做到这一点。你只需要找到一个通用的比例，使用多个 y-axis 和模拟标签和工具提示值，例如：

    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

ChartJS/High 图表雷达图 - 悬停时显示的每个类别的不同径向轴标签

ChartJS/High Charts Radar chart - Different radial axis labels for each category that appear on hover

java

highcharts

radar-chart

chart.js