ChartJS / High Charts Радарная диаграмма - разные метки радиальной оси для каждой категории, которые появляются при наведении курсора.

Мне интересно, можно ли пометить радиальную ось для каждой категории по-разному, которые появляются только при наведении курсора на значение. Наверное, проще всего объяснить на примере. Итак, на этом рисунке английские метки имеют диапазон от 50 до 100, который всплывает, когда я наводю курсор на одно из значений на этой оси.

Ось 1 радарной диаграммы

Затем я хочу, чтобы при наведении курсора на категорию «Поведение», например, отображались метки радиальной оси для этой категории, которые помечены по-разному.

Ось 2 радарной карты

Я знаю, что это может быть сложно (или невозможно) сделать, но есть ли творческий подход в ChartJS или HighCharts, где это возможно?

Спасибо!


java chart.js highcharts radar-chart
person jcw    schedule 18.10.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Это возможно с 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

person ppotaczek    schedule 19.10.2020
comment
Идеально! Это именно то, чем я был после - person jcw; 20.10.2020