Highcharts柱形图溢出了绘图区域

时间:2011-10-17 07:23:23

标签: javascript highcharts

问题如下:

如果我有一个非常稀疏的日期时间x轴和柱形图类型,那么有些列会被切割。

这是一个小提琴示例:http://jsfiddle.net/qzqnX/

在这个例子中,我有两列,极端的列正在被削减。

如果我将数据增加到3列,则其中一个系列会完全隐藏。

以下是小提琴示例:http://jsfiddle.net/GrKKt/

我希望在绘图区域内显示列,而不是部分剪切或隐藏。如果他们从绘图区域末端画一些边缘也会很好。感谢。

2 个答案:

答案 0 :(得分:2)

使用日期时间轴时,列的宽度处理不当,解决此问题的最佳方法是为中间的日期输入空值。像这样:

chart: {
    renderTo: 'container',
    type: 'column'
},

xAxis: {
    type: 'datetime'
},

series: [{
    data: [29.9, null, null, null, null, null, 71.5],
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 1 * 24 * 3600 * 1000 // one day
    },
{
    data: [29.9, null, null, null, null, null, 71.5],
    pointStart: Date.UTC(2010, 0, 1),
    pointInterval: 1 * 24 * 3600 * 1000 // one day
    }]

在这种情况下,这将使计算出的宽度在7天之间均匀分布。 jsfiddle上的示例。

http://i55.tinypic.com/o5x451.png

答案 1 :(得分:2)

我找到了上述问题的两种解决方案:

第一个答案中给出的

第一个解决方案是添加空值。我发现添加两个空值是最佳的,并且工作正常。即使您的数据中有很多系列。

示例:http://jsfiddle.net/vwzeP/

第二个解决方案是将minPadding,maxPadding添加到xaxis。无需在输入中添加空值。但是,highcharts在填充行为方面有点不一致。因此,您需要为min / maxPadding属性应用不同的值。在日期时间x轴上有超过6个点后,列宽会根据绘图区域自动显示,您可以将minPadding / maxPadding设置为默认值0.01。

好的填充值如下:

switch (numberOfPointsInDataArray) {
        case 1:
        case 2:
            padding = 0.25;
            break;
        case 3:
            padding = 0.13;
            break;
        case 4:
            padding = 0.075;
            break;
        case 5:
            padding = 0.05;
            break;
        case 6:
            padding = 0.03;
            break;
    }

数据数组中有2个点的填充示例:http://jsfiddle.net/J7zsk/

希望这有助于其他人。