Highcharts柱形图从容器延伸，不能正确显示X轴

Question

我正在尝试显示一个柱形图表，当多个系列每个只有一个数据时，它会正确显示x轴。

如果有多个数据，则图表会正确显示。

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

我创建了一个JSFiddle：https://jsfiddle.net/d9tcvkpe/3/

数据显示不正确的图表：

图表包含足够的数据以便正确显示：

代码：

  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,
      },
    },
  },

Answer 1

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

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

＆＃13;

＆＃13;

const seriesData = [
	{
  	data: [[1512086400000, 36.95]],
    maxPointWidth: 100,
    name: 'Alex',
    _colorIndex: 0
  },
  {
  	data: [[1509494400000, 12.99]],
    maxPointWidth: 100,
    name: 'Susan',
    _colorIndex: 1
  }
]

Highcharts.setOptions({
    global: {
      timezoneOffset: new Date().getTimezoneOffset() * 60,
      useUTC: false,
    },
});


Highcharts.chart('container', {
	      chart: {
        type: 'column',
        zoomType: 'x',
        height: 300,
      },
      credits: {
        enabled: false,
      },
      plotOptions: {
        column: {
          stacking: 'normal',
        },
        series: {
          connectNulls: true,
          lineWidth: 4,
          marker: {
            enabled: false,
            symbol: 'circle',
          },
        },
      },
      series: seriesData,
      xAxis: {
      startOnTick: true,
      endOnTick: true,
        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,
          style: {
            textShadow: 0,
          },
        },
      },
});

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

＆＃13;

＆＃13;

＆＃13;

JSfiddle示例： https://jsfiddle.net/ewolden/d9tcvkpe/4/

它看起来像这样：

第二个选项是调整minPadding and maxPadding：

xAxis: {
  minPadding: 0.2,
  maxPadding: 0.2,
  ...
}

填充数量当然可以根据喜好进行调整。

＆＃13;

＆＃13;

const seriesData = [
	{
  	data: [[1512086400000, 36.95]],
    maxPointWidth: 100,
    name: 'Alex',
    _colorIndex: 0
  },
  {
  	data: [[1509494400000, 12.99]],
    maxPointWidth: 100,
    name: 'Susan',
    _colorIndex: 1
  }
]

Highcharts.setOptions({
    global: {
      timezoneOffset: new Date().getTimezoneOffset() * 60,
      useUTC: false,
    },
});


Highcharts.chart('container', {
	      chart: {
        type: 'column',
        zoomType: 'x',
        height: 300,
      },
      credits: {
        enabled: false,
      },
      plotOptions: {
        column: {
          stacking: 'normal',
        },
        series: {
          connectNulls: true,
          lineWidth: 4,
          marker: {
            enabled: false,
            symbol: 'circle',
          },
        },
      },
      series: seriesData,
      xAxis: {
      minPadding: 0.2,
      maxPadding: 0.2,
        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,
          style: {
            textShadow: 0,
          },
        },
      },
});

＆＃13;

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>

＆＃13;

＆＃13;

＆＃13;

JSfiddle示例： https://jsfiddle.net/ewolden/d9tcvkpe/5/

它看起来像这样：