jQuery HighCharts Текст на оси y

Question

Привет, я пытаюсь создать простую диаграмму столбцов с высокими диаграммами.

Диаграмма отображает оценки студентов по четырем заданиям.

Каждое из четырех заданий перечислено через ось X.

Ось Y должна отображать каждый из возможных сортов A - E последовательно (т.е. каждая буква должна появляться на оси, даже если в серии нет данных для этого класса).

Я попытался использовать числа для обозначения оценки в моем серии данных, а затем с использованием предложения при Текстовые маркировки HighCharts для оси Y Чтобы вручную заполнить ось Y, но только первые классы показывают.

Плюс, когда я alert(this.value) В функции форматета метки я получаю возвращенную серию чисел (0,500,0,5,10), из которых лишь пара обнаруживает какое -либо отношение к цифрам в данных серии. Помогите, пожалуйста!

Вот мой код;

$(document).ready(function(){

    var seriesData = [{
                    name: 'Grade',
                    data: [5,2,1,4]
                    }];

    var xAxisLabels = {categories: ['Assignment One', 'Assignment Two', 'Assignment Three', 'Assignment Four']};

    var yAxisLabels = ['E','D','C','B','A'];

    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'chart',
            defaultSeriesType: 'column'
        },
        series: seriesData,
        xAxis: xAxisLabels,
        yAxis: {        
            labels: {
                formatter: function() {
                    return yAxisLabels[this.value];
                }
            }
        }

    });


});

Answer 1

Поскольку индексы массива JavaScript начинаются с 0, вы должны добавить пустую метку, так как ваши значения варьируются от (5: от 1 до 1: e).

Я добавил форматер для подъема инструментов, чтобы изменить этикетку подъема инструментов, чтобы показать оценки, а не числовые значения.

$(document).ready(function(){
    var seriesData = [{
                    name: 'Assignments',
                    data: [5,2,1,4]
                    }];

    var xAxisLabels = {categories: ['Assignment One', 'Assignment Two', 'Assignment Three', 'Assignment Four']};

    var yAxisLabels = ['','E','D','C','B','A'];

    var chart = new Highcharts.Chart({

        chart: {
            renderTo: 'chart',
            defaultSeriesType: 'column'
        },
        title: { text: 'Achievements of John Doe' },
        series: seriesData,
        xAxis: xAxisLabels,
        yAxis: {
            endOnTick: true,
            min: 0,
            max: 5,
            title: { text: 'Grade' },
            labels: {
                formatter: function() {
                    return yAxisLabels[this.value];
                }
            }
        },
        tooltip: {
            formatter: function() {
                return this.x+': '+yAxisLabels[this.y];
            }
        }
    });
});