在高图表水平条形图中显示所有标签

Show all labels in highcharts horizontal bar graph

本文关键字：标签 显示 高图表 水平 条形图      更新时间：2023-09-26

我想在高图表上显示所有标签你可以看到 http://jsfiddle.net/valrecx/fj6d2/3021月份不完整，代码仅显示 1 月、4 月、7 月等我想显示所有标签，包括中间的那些月份可见月份，1月，2月，3月，4月等。

var chart = new Highcharts.Chart({
    chart: {
        renderTo: 'container',
        type:'bar'
    },
    xAxis: {
        categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
        min: 6
    },
      plotOptions: {
            series: {
                pointPadding: 0.4,groupPadding:0.1   ,pointWidth:5
            }
        },
    legend: {
        verticalAlign: 'top',
        y: 100,
        align: 'right'
    },
    scrollbar: {
        enabled: true
    },
    series: [{
        data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4,9.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
    }
       ]
});

我怎样才能在高图上实现这一点？

最简单的方法是将 #containerdiv 的高度更改为至少 500px 。Highcharts将显示其余的标签，因为有足够的空间。

您可以缩小字体，但在这种情况下，您可能仍需要增加高度以保持其可读性。方法如下：

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec','Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    min: 6,
    labels: {
        style: {
            fontSize: '5px'
        }
    }
},

这是一种根据序列中的数据量调整图形高度的方法。这可能不是最好的解决方案，但它有效。您必须根据需要调整值。

if (chart.series[0].data.length > 0) {
    var baseHeight = 150;
    var extraHeightPerThing = 25;
    chart.setSize(null, baseHeight + chart.series[0].data.length * extraHeightPerThing);
}
相关文章：