Question

我想在高图上显示所有标签你可以看到http://jsfiddle.net/valrecx/fj6d2/3021 这几个月没有完成，代码只显示jan，aprl，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]
    }
       ]
});

我如何在高潮图上实现这一目标？

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

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

1 个答案: