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];
            }
        }
    });
});