Javascript Highcharts柱形图扩展到容器之外，不'；不能正确显示X轴

我试图显示一个列图表，当多个系列中每个系列只有一条数据时，它可以正确显示x轴

如果有多条数据，图表将正确显示

我在配置中尝试了几个选项，但是Highcharts很难用有限的数据量显示x轴标签

我已经创建了一个JSFIDLE：

几乎没有数据但显示不正确的图表：

  chart: {
    renderTo: id,
    type: 'column',
    zoomType: 'x',
    backgroundColor: cssVar('fig-desktop-wash'),
    height: 300,
  },
  credits: {
    enabled: false,
  },
  plotOptions: {
    column: {
      stacking: 'normal',
    },
    series: {
      connectNulls: true,
      lineWidth: 4,
      marker: {
        enabled: false,
        symbol: 'circle',
      },
    },
  },
  series: series,
  xAxis: {
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    type: 'datetime',
    tickInterval: 24 * 3600 * 1000 * 30,
    labels: {
      align: 'center',
      format: "{value:%b '%y}",
      enabled: true,
      y: 20,
    },
  },
  yAxis: {
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    tickmarkPlacement: 'on',
    stackLabels: {
      enabled: true,
      backgroundColor: cssVar('fig-desktop-wash'),
      style: {
        color: cssVar('fig-primary-text'),
        fontFamily: cssVar('x-default-font'),
        textShadow: 0,
      },
    },
  },

有足够数据正确显示的图表：

  chart: {
    renderTo: id,
    type: 'column',
    zoomType: 'x',
    backgroundColor: cssVar('fig-desktop-wash'),
    height: 300,
  },
  credits: {
    enabled: false,
  },
  plotOptions: {
    column: {
      stacking: 'normal',
    },
    series: {
      connectNulls: true,
      lineWidth: 4,
      marker: {
        enabled: false,
        symbol: 'circle',
      },
    },
  },
  series: series,
  xAxis: {
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    type: 'datetime',
    tickInterval: 24 * 3600 * 1000 * 30,
    labels: {
      align: 'center',
      format: "{value:%b '%y}",
      enabled: true,
      y: 20,
    },
  },
  yAxis: {
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    tickmarkPlacement: 'on',
    stackLabels: {
      enabled: true,
      backgroundColor: cssVar('fig-desktop-wash'),
      style: {
        color: cssVar('fig-primary-text'),
        fontFamily: cssVar('x-default-font'),
        textShadow: 0,
      },
    },
  },

代码：

  chart: {
    renderTo: id,
    type: 'column',
    zoomType: 'x',
    backgroundColor: cssVar('fig-desktop-wash'),
    height: 300,
  },
  credits: {
    enabled: false,
  },
  plotOptions: {
    column: {
      stacking: 'normal',
    },
    series: {
      connectNulls: true,
      lineWidth: 4,
      marker: {
        enabled: false,
        symbol: 'circle',
      },
    },
  },
  series: series,
  xAxis: {
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    type: 'datetime',
    tickInterval: 24 * 3600 * 1000 * 30,
    labels: {
      align: 'center',
      format: "{value:%b '%y}",
      enabled: true,
      y: 20,
    },
  },
  yAxis: {
    gridLineWidth: 0,
    minorGridLineWidth: 0,
    tickmarkPlacement: 'on',
    stackLabels: {
      enabled: true,
      backgroundColor: cssVar('fig-desktop-wash'),
      style: {
        color: cssVar('fig-primary-text'),
        fontFamily: cssVar('x-default-font'),
        textShadow: 0,
      },
    },
  },

---

我有两种可能的解决方案，第一种是设置xAxis，如下所示：

xAxis: {
  startOnTick: true,
  endOnTick: true,
  ...
}

const seriesData=[
{
数据：[[1512086400000,36.95]]，
maxPointWidth:100，
姓名：“Alex”，
_颜色索引：0
},
{
数据：[[1509494400000,12.99]]，
maxPointWidth:100，
姓名：'苏珊'，
_颜色指数：1
}
]
Highcharts.setOptions({
全球：{
timezoneOffset:new Date（）.getTimezoneOffset（）*60，
useUTC:false，
},
});
Highcharts.chart（'容器'{
图表：{
键入：“列”，
zoomType:'x'，
身高：300，
},
学分：{
启用：false，
},
打印选项：{
专栏：{
堆叠：“正常”，
},
系列：{
connectNulls:true，
线宽：4，
标记：{
启用：false，
符号：'圆'，
},
},
},
系列：系列数据，
xAxis：{
是的，
恩东蒂克：是的，
网格线宽：0，
minorGridLineWidth:0，
键入：“日期时间”，
滴答声间隔：24*3600*1000*30，
标签：{
对齐：'居中'，
格式：“{值：%b'%y}”，
启用：对，
y:20，
},
},
亚克斯：{
网格线宽：0，
minorGridLineWidth:0，
勾选位置：“on”，
堆叠标签：{
启用：对，
风格：{
textShadow:0，
},
},
},
});
tick上的开始/结束帮助。非常感谢。