使用 Highcharts 混合线性和日期时间 x 轴答案

【问题标题】：Mixing linear and datetime x-axes with Highcharts使用 Highcharts 混合线性和日期时间 x 轴
【发布时间】：2015-12-11 09:42:29
【问题描述】：

我正在尝试使用包含 2 个系列的 Highcharts 构建图表：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 轴无法拉伸图表的整个宽度。如果我从系列数组中删除日期时间轴上的步进线，线性样条将绘制全宽，但在日期时间轴上添加一个系列似乎会破坏线性轴。

希望我缺少一些明显的东西。感谢任何帮助！谢谢

【问题讨论】：

标签： javascript highcharts

【解决方案1】：

两个 x 轴上的刻度正在对齐。这是默认启用的。

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

chart: {
    alignTicks: false
}

参见this updated JSFiddle 演示。也可以see the API了解详情。

【讨论】：

是的，我错过了一些明显的东西。谢谢！