y轴上的jquery highcharts文本

Question

您好，我正在尝试创建一个带有高图表的简单柱形图。

图表显示学生四项作业的成绩。

四个分配中的每一个都列在 x 轴上。

y 轴应连续显示每个可能的等级 A - E（即每个字母必须出现在轴上，即使该等级的系列中没有数据）。

我尝试在我的系列数据中使用数字来表示成绩，然后使用Highcharts text labels for y-axis 的建议手动填充 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];
            }
        }
    });
});