Javascript Highcharts柱形图溢出绘图区域

问题如下：

如果我有一个非常稀疏的填充日期时间x轴和柱状图类型，那么一些列会被剪切

下面是一个小提琴的例子：

在本例中，我有两列，最末端的列被剪切

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

以下是小提琴的例子：

---

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

使用日期时间轴时，列的宽度处理得不是很好，解决这一问题的最佳方法是为其间的日期输入空值。像这样：

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天之间均匀分布。举个例子

---

使用日期时间轴时，列的宽度处理得不是很好，解决这一问题的最佳方法是为中间的日期输入空值。像这样：

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天之间均匀分布。举个例子

---

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

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

例如：

第二个解决方案是将minPadding、maxPadding添加到xaxis。也不需要向输入中添加空值。但highcharts的填充行为有点不一致。因此，您需要为min/maxPadding属性应用不同的值。一旦datetime 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个点填充的示例：

---

希望这对其他人有所帮助。

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

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

例如：

第二个解决方案是将minPadding、maxPadding添加到xaxis。也不需要向输入中添加空值。但highcharts的填充行为有点不一致。因此，您需要为min/maxPadding属性应用不同的值。一旦datetime 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个点填充的示例：

希望这能帮助别人