Highcharts 防止 xAxis 标签隐藏答案

【问题标题】：Highcharts prevent xAxis Labels hiddenHighcharts 防止 xAxis 标签隐藏
【发布时间】：2014-01-13 21:54:22
【问题描述】：

我正在使用 highcharts 来显示条形图。我有一个固定的图表垂直高度，我希望显示所有 xAxis 标签。 webparts 容器的水平部分响应窗口的大小。我发现在某些水平尺寸下，图例会包裹起来，这似乎会导致我的一些 xAxis 标签被隐藏。我一直找不到任何可以阻止这种情况的设置或设置组合。有谁知道在不改变 webpart 垂直高度的情况下实现这一点的方法？

问题示例jsFiddle。

或下面的示例代码，

HTML：

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" style="height: 180px; width: 330px; margin: 0 auto"></div>
<div id="container2" style="height: 180px; width: 500px; margin: 0 auto"></div>

Javascript

$(function () {
    var options = {
        chart: {
            type: 'bar'
        },
        title: {
            text: null
        },
        xAxis: {
            categories: ['Data1', 'Data2', 'Data3', 'Data4', 'Data5']
        },
        plotOptions: {
            series: {
                stacking: 'normal'
            }
        },
        series: [{
            name:'Due > 7',
            data: [29.9, 71.5, 106.4, 129.2, 144.0]
        },{
            name:'Due < 7',
            data: [34.9, 72.1, 99.4, 150.4, 169.1]
        },{
            name:'Overdue < 7',
            data: [29.9, 71.5, 106.4, 129.2, 144.0]
        },{
            name:'Overdue > 7',
            data: [34.9, 72.1, 99.4, 150.4, 169.1]
        }]
    };
    $('#container').highcharts(options);
    $('#container2').highcharts(options);
});

【问题讨论】：

标签： highcharts

【解决方案1】：

你可以重新设计一个小图表，一些解决方案：

在右侧使用图例：http://jsfiddle.net/Sbm6q/2/
为图表设置maxHeight（可能不适用于您的情况，当您的系列数量很少时）：http://jsfiddle.net/Sbm6q/3/

【讨论】：

maxHeight 似乎是我的最佳选择。感谢您的选择。

【解决方案2】：

您可以使用 step 选项，并将其值设置为 1。（文档：http://api.highcharts.com/highcharts#xAxis.labels.step）

在我的项目中，这解决了被 highcharts 隐藏的 xAxis 标签，因为 API 隐藏元素会因为空间不足而被覆盖。因此，当我使用它时，会显示所有 xAxis 值，但有一些会覆盖下一个标签。所以，我必须扩展我的图形高度。

但是有效，现在响应非常好！

【讨论】：