y轴上的jquery highcharts文本

Posted 2023-05-07

【中文标题】y轴上的jquery highcharts文本

【英文标题】：jquery highcharts text on y-axis

【发布时间】：2012-03-09 14:35:42

【问题描述】：

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

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

四个分配中的每一个都列在 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];
                
            
        

    );


);

【参考方案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];
            
        
    );
);

【讨论】：

太棒了！工具提示也为我节省了一份工作:) 谢谢。即使我使用 css 将图表的高度设置为 300px，是否有任何方法可以确保所有 yAxis 标签仍然存在？

当您通过 css 设置 <div id="chart"> 的高度时，仍应显示完整的图表。是的。

好像不是这样的。当我将其设置为 300 像素时，只有“B”和“D”标签可见？

默认y轴刻度间隔为72。5乘以72大于300。在yAxis的定义中添加tickPixelInterval: 50,。

绝对正确 :) 非常感谢！