Highcharts 双X轴图表不缩放轴

Question

我正在尝试使用Hightcharts创建一个双 x 轴图表，以便我可以将 map 两个系列放在一起。 但是我被困住了，因为该系列带有不同的间隔数据。 该系列是：

Flow Rate - taken every 15 mins. - 96 data points, wanted as line chart
Usage - taken every hour. - 24 data points, wanted as bar chart

我一直在玩这个小提琴，试图让它发挥作用，但我一直发现 15 分钟间隔系列并没有像每小时一样完全添加到图表中。

或者使用linkedTo属性，我只得到一半的图表有条形图。

感谢您的任何建议。

这是我的代码：

Highcharts.chart('container', {
  chart: {
    zoomType: 'xy'
  },
  title: {
    text: 'Usage Vs Flow Rate Example'
  },
  xAxis: [{
    categories: ['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00', '21:00', '22:00', '23:00'],
    crosshair: true,
    width: '100%',
  }, {
    categories: ['00:00', '00:15', '00:30', '00:45', '01:00', '01:15', '01:30', '01:45', '02:00', '02:15', '02:30', '02:45', '03:00', '03:15', '03:30', '03:45', '04:00', '04:15', '04:30', '04:45', '05:00', '05:15', '05:30', '05:45', '06:00', '06:15', '06:30', '06:45', '07:00', '07:15', '07:30', '07:45', '08:00', '08:15', '08:30', '08:45', '09:00', '09:15', '09:30', '09:45', '10:00', '10:15', '10:30', '10:45', '11:00', '11:15', '11:30', '11:45', '12:00', '12:15', '12:30', '12:45', '13:00', '13:15', '13:30', '13:45', '14:00', '14:15', '14:30', '14:45', '15:00', '15:15', '15:30', '15:45', '16:00', '16:15', '16:30', '16:45', '17:00', '17:15', '17:30', '17:45', '18:00', '18:15', '18:30', '18:45', '19:00', '19:15', '19:30', '19:45', '20:00', '20:15', '20:30', '20:45', '21:00', '21:15', '21:30', '21:45', '22:00', '22:15', '22:30', '22:45', '23:00', '23:15', '23:30', '23:45'],
    opposite: true,
    crosshair: true,
    width: '100%',
  }],
  yAxis: [{ // Primary yAxis
    labels: {
      format: '{value} L/m',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    },
    title: {
      text: 'Flow Rate',
      style: {
        color: Highcharts.getOptions().colors[1]
      }
    }
  }, { // Secondary yAxis
    title: {
      text: 'Usage',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    labels: {
      format: '{value} L',
      style: {
        color: Highcharts.getOptions().colors[0]
      }
    },
    opposite: true
  }],
  tooltip: {
    shared: false
  },
  legend: {
    layout: 'vertical',
    align: 'left',
    x: 120,
    verticalAlign: 'top',
    y: 10,
    floating: true,
    backgroundColor: Highcharts.defaultOptions.legend.backgroundColor || // theme
      'rgba(255,255,255,0.25)'
  },
  series: [{
    name: 'Usage',
    type: 'column',
    xAxis: 1,
    yAxis: 1,
    data: [84,66,54,39,99,84,17,38,63,35,5,48,91,66,98,21,23,57,35,21,23,83,58,89],
    tooltip: {
      valueSuffix: ' L'
    }
  }, {
    name: 'Flow Rate',
    type: 'line',
    data: [10,2,3,1,2,2,1,10,1,3,1,2,2,1,10,2,9,4,9,4,8,8,3,1,8,7,6,1,4,3,9,1,9,2,8,1,10,5,6,6,9,9,5,3,1,10,8,2,1,5,8,4,6,9,5,9,10,6,5,8,4,10,8,2,1,6,8,3,9,6,1,6,1,1,10,3,10,9,1,8,8,4,1,2,6,5,7,9,7,5,4,9,10,7,7,5],
    tooltip: {
      valueSuffix: ' L/m'
    }
  }]
});

Answer 1

您是否考虑过使用pointStart和pointInterval功能来实现想要的结果？

这是我的想法的简化演示： https://jsfiddle.net/BlackLabel/fesnwyp0/

  xAxis: [{
    type: 'datetime',
    crosshair: true,
  }, {
    type: 'datetime',
    opposite: true,
    crosshair: true,
  }],

API： https://api.highcharts.com/highcharts/series.line.pointStart