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: A до 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];
            }
        }
    });
});