Highcharts：同一轴上的不同刻度间隔

Question

我有一个由以下组成的系列：

1. 每日值，直到某个日期
2. 6 个月的值，从该日期开始 以后

我想专门增加图表第二部分的刻度间隔，以便压缩数据。为了清楚起见，我希望图表左侧代表 一个月 的 相同空间 代表右侧的 6 个月。

我不确定 Highcharts 是否允许这样做...我认为可以有两种不同的方法：

1. 创建具有两个不同轴的两个系列，并在另一个之后设置一个轴
2. 为同一轴设置不同的 tickInterval。

使用 tickPositions 和 tickPositioner 我只设法显示更多或更少的刻度，但始终保持它们在时间轴上的位置。

这是我的代码：

Highcharts.chart('container', {
    chart: {
  zoomType: 'xy',
  animation: false
},
    title: {
    text: 'Some data'
},
    legend: {
        verticalAlign: 'bottom',
        borderWidth: 0
    },
    xAxis: {
        type : 'datetime',
        tickInterval: 30 * 24 * 3600 * 1000,
        labels: {
            useHTML: true,
            rotation: -90
        },
        dateTimeLabelFormats: { // don't display the dummy year
            month: '%b-%y',
            year: '%Y'
        },
        plotLines: [{
            color: 'gray',
            dashStyle: 'longdashdot',
            value: 1536278400000,
            width: 1,
            label: {
                text: 'Selected Date'
            }
        }]
    },
    yAxis: {
        title: {
            text: null
        },
        maxZoom: 0.1
    },
    series: jsonData

});

Here's a jsfiddle 包含我的原始数据的子集。

实现这一目标的最佳方法是什么？

Answer 1

默认情况下，Highcharts 不允许这样做，但您可以使用解决方法。您可以创建两个具有正确大小比例的 xAxis 和两个系列，如下例所示：

xAxis: [{
  type: 'datetime',
  endOnTick: false,
  tickInterval: 30 * 24 * 3600 * 1000,
  max: 1536278400000,
  width: '65%',
  labels: {
    useHTML: true,
    rotation: -90
  },
  dateTimeLabelFormats: { // don't display the dummy year
    month: '%b-%y',
    year: '%Y'
  },
  plotLines: [{
    color: 'gray',
    dashStyle: 'longdashdot',
    value: 1536278400000,
    width: 1,
    label: {
      text: 'Selected Date'
    }
  }]
}, {
  min: 1536278400000,
  startOnTick: false,
  offset: 0,
  type: 'datetime',
  tickInterval: 180 * 24 * 3600 * 1000,
  labels: {
    useHTML: true,
    rotation: -90
  },
  dateTimeLabelFormats: { // don't display the dummy year
    month: '%b-%y',
    year: '%Y'
  },
  width: '35%',
  left: '65%'
}]

现场演示：https://jsfiddle.net/BlackLabel/zxd4j5tn/