Question

我正在使用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);
});

Answer 1

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

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

Answer 2

您可以使用步骤选项，并将其值设置为1。（文档：http：//api.highcharts.com/highcharts#xAxis.labels.step）在我的项目中，这解决了由highcharts隐藏的xAxis标签，因为API隐藏的元素将因为缺少空间而覆盖其他元素。因此，当我使用它时，会显示所有xAxis值，但有一些会覆盖下一个标签。所以，我必须扩展我的图形高度。但是工作，现在响应非常好！

Highcharts可防止隐藏xAxis标签

2 个答案: