javascript - Highcharts 柱形图溢出绘图区域

Question

问题如下:

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

这是一个 fiddle 示例:http://jsfiddle.net/qzqnX/

在此示例中，我有两列，最末端的列被剪切。

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

这是 fiddle 示例:http://jsfiddle.net/GrKKt/

我希望列显示在绘图区域内，而不是被部分剪切或隐藏。如果他们在绘图区域末端留有一些边距，那就太好了。谢谢。

Answer 1

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

第一个答案中给出的

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

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

第二个解决方案是向 xaxis 添加 minPadding、maxPadding。也无需向您的输入添加空值。但 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/

希望这对其他人有帮助。