Highchart Stock 结合散点和列类型系列，时间格式为 24 小时。 不显示 24 小时格式它采用自己的 x 值

Question

结合线、散点和列时，此处底部 x 轴与顶部 x 轴显示的每小时详细信息不同。 在 JS Fiddle 中有代码。

请让我知道如何解决这个问题，我需要在底部 x 轴上显示每小时。

您可以在下面的链接中看到代码，当组合多个图表时，图表时间显示格式不匹配

      Highcharts.stockChart('container', {
    chart: {
      animation: {
        duration: 1000,
      },
    },
    title: { text: 'Hourly Revenues for Today' },
    navigator: {
      xAxis: {
        startOnTick: true,
        endOnTick: true,
        type: 'datetime', 
        tickAmount: 24,
        tickInterval: 3600000,
        min: 1656460800000,
        max: 1656547199000,
      }
    },
    xAxis: [
      {
        type: 'datetime', 
        tickAmount: 24,
        tickInterval: 3600000,
        startOnTick: true,
        endOnTick: true,
        minRange: Date.UTC(2022, 5, 29, 0, 0, 0),
        maxRange: Date.UTC(2022, 5, 29, 23, 59, 59),
        min: Date.UTC(2022, 5, 29, 0, 0, 0),
        max: Date.UTC(2022, 5, 29, 23, 59, 59),
        zoomEnabled: false
      },
      {
        type: 'datetime',
        tickAmount: 24,
        tickInterval: 3600000,
        minRange: Date.UTC(2022, 5, 29, 0, 0, 0),
        maxRange: Date.UTC(2022, 5, 29, 23, 59, 59),
        min: Date.UTC(2022, 5, 29, 0, 0, 0),
        max: Date.UTC(2022, 5, 29, 23, 59, 59),
        opposite: true
      },
    ],
    yAxis: {
      min: 0,
      title: {
        text: 'Revenues in USD',
      },
    },
    legend: {
      enabled: false,
    },
    tooltip: {
      pointFormat: 'Revenues today: <b>{point.y:,.0f} </b>',
    },
    credits: { enabled: false },

    series: [
      {
        type: 'line',
        name: 'Revenues today',
        pointStart: Date.UTC(2022, 5, 29, 0, 0, 0),
        color: 'red',
        // pointWidth: 40,
        data: [
          { x: Date.UTC(2022, 5, 29, 13, 4, 5), y: 23 },
          { x: Date.UTC(2022, 5, 29, 18, 4, 5), y: 20 },
        ],
      },
      {
        type: 'column',
        name: 'Revenues today',
        getExtremesFromAll: true,
        maxPointWidth: 10,
        pointStart: Date.UTC(2022, 5, 29, 0, 0, 0),
        // pointWidth: 40,
        data: [
          { x: Date.UTC(2022, 5, 29, 22, 4, 5), y: 20 },
        ],
      },
      {
        type: 'column',
        name: 'Revenues today',
        color: 'red',
        // pointWidth: 40,
        visible: false,
        data: [
          { x: Date.UTC(2022, 5, 29, 0, 0, 0), y: 23 },
          { x: Date.UTC(2022, 5, 29, 23, 59, 59), y: 20 },
        ],
      },
      {
        type: 'scatter',
        name: 'Revenues today',
        // pointWidth: 40,
        data: [
          { x: Date.UTC(2022, 5, 29, 5, 4, 5), y: 23 },
          { x: Date.UTC(2022, 5, 29, 6, 4, 5), y: 20 },
        ],
      },
    ],
    plotOptions:{
      series: {
        pointStart: Date.UTC(2022, 5, 29, 0, 0, 0),
        pointInterval: 3600 * 1000,
    }
    },
    exporting: {
      // we don't show the 'show data view' and 'edit in highmaps cloud' buttons
      buttons: {
        contextButton: {
          menuItems: [
            'viewFullscreen',
            'printChart',
            'separator',
            'downloadPDF',
            'downloadPNG',
            'downloadJPEG',
            'downloadSVG',
            'separator',
            'downloadXLS',
            'downloadCSV',
          ],
        },
      },
    },
  });

Answer 1

将 xAxis 设置为相同值的主要概念是通过方法Highcharts.Axis#setExtremes进行同步。

function syncExtremes(e) {
  var thisChart = this.chart;

  if (e.trigger !== 'syncExtremes') { // Prevent feedback loop
    Highcharts.each(Highcharts.charts, function(chart) {
            
        if (chart.xAxis[0].setExtremes) { // It is null while updating
          chart.xAxis[0].setExtremes(
            e.min,
            e.max,
            undefined,
            false, {
              trigger: 'syncExtremes'
            }
          );
        }
        if (chart.xAxis[1].setExtremes) { // It is null while updating
          chart.xAxis[1].setExtremes(
            e.min,
            e.max,
            undefined,
            false, {
              trigger: 'syncExtremes'
            }
          );
        }
                
    });
  }
}

下一步是触发轴xAxis.events.setExtremes的事件处理程序并在我们的 syncExtremes function 中实现。

xAxis: [{
  type: 'datetime',
  events: {
    setExtremes: syncExtremes
  },
}, {
  type: 'datetime',
  events: {
    setExtremes: syncExtremes
  },
  opposite: true
}],

现场演示：

https://jsfiddle.net/BlackLabel/dzvou1es/3/

API 参考文献：

https://api.highcharts.com/class-reference/Highcharts.Axis#setExtremes https://api.highcharts.com/highcharts/xAxis.events.setExtremes