javascript - 在 highcharts 水平条形图中显示所有标签

Question

我想在 Highcharts 上显示所有标签 你可以看到http://jsfiddle.net/valrecx/fj6d2/3021 月份不完整，代码只显示一月、四月、七月等 我想显示所有标签，包括中间的月份 可见月份的一月、二月、三月、四月等。

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

我怎样才能在 highchart 上实现它？

Answer 1

最简单的方法是将 #container div 的高度更改为至少 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);
}