Highcharts：在多个图表中同步轴标记

Posted 2021-05-05

我对同步两个不同的Highcharts图表的刻度有问题。

第一个图表显示一天事件，第二个图表显示连续事件。并且有一些要求xAxis必须同步。在互联网上，我找到了同步的例子，但出了点问题。在图片中，我们看到在某些时刻滴答声开始不同步。我的代码On jsfiddle和那里：

var weekInterval = 7 * 24 * 60 * 60 * 1000;

var startDate = new Date(2016, 1, 1).getTime();
var endDate = new Date(2017, 1, 1).getTime();

Highcharts.chart({
    chart: {
    renderTo: "chart_1",
    height: "350px",
    marginLeft: 100,  
    },
  title: {
    text: 'Chart 1'
  },
  yAxis: {
    title: {
        text: ''
    },
    labels: {
        enabled: false
    }
  },
  xAxis: {
    startOnTick: true,
    tickInterval: weekInterval,
    type: 'datetime',
    min: startDate,
    max: endDate,
    labels: {
        enabled: false
    }
  },
  series: [
    {
        data: constructFakeData1(startDate, endDate)
    }
  ]
})

Highcharts.chart({
    chart: {
    renderTo: "chart_2",
    height: "350px",
    inverted: true,
    marginLeft: 100,  
    },
  title: {
    text: 'Chart 2'
  },  
  xAxis: {
    title: {
        text: ''
    },
    labels: {
        enabled: false
    }
  },
  yAxis: {
    startOnTick: true,
    tickInterval: weekInterval,
    type: 'datetime',
    min: startDate,
    max: endDate,
    labels: {
        enabled: false
    }
  },
  series: [
    {
        type: 'columnrange',
        data: constructFakeData2(startDate, endDate)
    }
  ]
})


function constructFakeData1(startDate, endDate) {   
    var data = []

  for (var x = startDate; x < endDate; x += weekInterval) {
    data.push({
        x: x,
      y: Math.random() * 100
    }); 
  }

  return data;
}

function constructFakeData2(startDate, endDate) {   
    return  [[0, startDate, (startDate + endDate) / 2],
    [1, startDate / 3, endDate / 3],
    [2, startDate, endDate]]
}

答案

您需要为endOnTick禁用yAxis选项，因为它默认启用：

yAxis: {
    endOnTick: false,
    ...
},

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

API：https://api.highcharts.com/highcharts/yAxis.endOnTick