Question

我在同步两个不同的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]]
}

Answer 1

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

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

实时演示：https://jsfiddle.net/BlackLabel/dex475zj/

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

高图：跨多个图表同步轴刻度

1 个答案: