javascript - 将线性和日期时间 x 轴与 Highcharts 混合

Question

我正在尝试使用 Highcharts 构建一个图表，其中包含 2 个系列:1 条样条线和 1 条线(步进模式)。对于样条线，我希望它位于线性 x 轴上，其中每个点均匀分布(通过仅提供 Y 值)。我想要在日期时间 x 轴上绘制的线。

我的 x 轴定义如下:

xAxis: [{ // 0
  type: 'datetime',
  dateTimeLabelFormats: { // don't display the dummy year
    month: '%e. %b',
    year: '%b'
  },
  title: {
    text: 'Date'
  }
}, { // 1
  type: 'linear',
  dateTimeLabelFormats: { // don't display the dummy year
    month: '%e. %b',
    year: '%b'
  },
  title: {
    text: null
  },
  labels: {
    enabled: false
  },
  tickLength: 0
}]

还有我的系列:

series: [{
  name: 'Winter 2013-2014',
  data: [
    [Date.UTC(1970, 9, 29), 0],
    [Date.UTC(1970, 10, 9), 0.4],
    [Date.UTC(1970, 11, 1), 0.25],
    [Date.UTC(1971, 0, 1), 1.66],
    [Date.UTC(1971, 0, 10), 1.8],
    [Date.UTC(1971, 1, 19), 1.76],
    [Date.UTC(1971, 2, 25), 2.62],
    [Date.UTC(1971, 3, 19), 2.41],
    [Date.UTC(1971, 3, 30), 2.05],
    [Date.UTC(1971, 4, 14), 1.7],
    [Date.UTC(1971, 4, 24), 1.1],
    [Date.UTC(1971, 5, 10), 0],
    [Date.UTC(1971, 5, 13), 1.65],
    [Date.UTC(1971, 5, 15), 1.29],
    [Date.UTC(1971, 5, 23), .88]
  ],
  type: 'line',
  step: true,
  xAxis: 0
}, {
  name: 'Winter 2014-2015',
  data: [
    2.63,
    2.77,
    2.68,
    2.56,
    2.39,
    2.3,
    2,
    1.85,
    1.49,
    1.08,
    2.4,
    1.8,
    1.9,
    1.9,
    2.3
  ],
  xAxis: 1,
  type: 'spline'
}]

这是我想要完成的全部任务:

http://jsfiddle.net/bmxpert1/jgxjsfyd/4/

所以问题是线性 x 轴不会拉伸(stretch)图表的整个宽度。如果我从系列数组中删除日期时间轴上的步进线，线性样条线将绘制全宽度，但向日期时间轴添加系列似乎会破坏线性轴。

希望我遗漏了一些明显的东西。感谢任何帮助!谢谢

Answer 1

两个 x 轴上的刻度正在对齐。默认情况下启用此功能。

您可以使用以下代码禁用对齐:

chart: {
    alignTicks: false
}

参见this updated JSFiddle示范。另外see the API了解详情。