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

标签： javascripthighcharts

Answer 1

我有两个可能的解决方案给你，第一个是设置xAxis，像这样startOnTick：endOnTick

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

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

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

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

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

它看起来像这样：

---

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

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

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

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

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

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

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

它看起来像这样：