用高图覆盖2个不同长度的数据系列 [英] Overlay 2 series of data of different length with highcharts

问题描述

我有2个系列的数据，其中x轴是日期-一个周期接一个周期，例如2周，然后是2周.

I have 2 series of data, where the x-axis is dates - 1 period after another eg 2 weeks and then 2 weeks.

我想覆盖2个系列，尽管第二个系列尚未完成.目前，第二个系列正在拉伸x轴的整个长度，而不是以相同的时间间隔进行绘制，并使天数与系列1相匹配.

I want to overlay the 2 series, although the second series has not completed yet. At the moment the second series is stretching the entire length of the x-axis rather than plotting at the same intervals and matching up the day count to series 1.

    $(function() {
  $('#clicks').highcharts({
    chart: {
      type: 'line'
    },
    title: {
      text: 'Clicks'
    },
    yAxis: {
      title: {
        text: 'Clicks'
      },
      min: 0
    },
    xAxis: [{
      type: 'datetime',
      tickInterval: 30 * 24 * 3600 * 1000
    }, {
      type: 'datetime',
      tickInterval: 30 * 24 * 3600 * 1000
    }],
    series: [{
        name: 'Control Clicks',
        data: [
          [Date.UTC(2018, 2, 22), 2],
          [Date.UTC(2018, 2, 23), 0],
          [Date.UTC(2018, 2, 24), 0],
          [Date.UTC(2018, 2, 25), 1],
          [Date.UTC(2018, 2, 26), 1],
          [Date.UTC(2018, 2, 27), 2],
          [Date.UTC(2018, 2, 28), 0],
          [Date.UTC(2018, 2, 29), 0],
          [Date.UTC(2018, 2, 30), 1],
          [Date.UTC(2018, 2, 31), 2],
          [Date.UTC(2018, 3, 1), 0],
          [Date.UTC(2018, 3, 2), 0],
          [Date.UTC(2018, 3, 3), 0],
          [Date.UTC(2018, 3, 4), 0],
          [Date.UTC(2018, 3, 5), 2],
        ]
      },
      {
        name: 'Test Clicks',
        data: [
          [Date.UTC(2018, 3, 6), 0],
          [Date.UTC(2018, 3, 7), 0],
          [Date.UTC(2018, 3, 8), 0],
          [Date.UTC(2018, 3, 9), 2],
          [Date.UTC(2018, 3, 10), 2],
          [Date.UTC(2018, 3, 11), 0],
          [Date.UTC(2018, 3, 12), 1],
          [Date.UTC(2018, 3, 13), 1],
          [Date.UTC(2018, 3, 14), 0],
        ],
        xAxis: 1
      }
    ]
  });
});

https://jsfiddle.net/0yd6hucc/

如何获取这些以相同的x轴间隔绘制?

How can I get these to plot at the same x-axis intervals?

推荐答案

此处的解决方案是在第二个轴上手动设置最大值:

The solution here is to manually set maximum on the second axis:

  events: {
    render: function() {
      if (renderEnabled) { // setExtremes() calls render event too - prevent infinite recursive loop
        var xAxes = this.xAxis,
          extremes = xAxes[0].getExtremes(),
          range = extremes.max - extremes.min;

        renderEnabled = false;
        xAxes[1].setExtremes(null, xAxes[1].getExtremes().min + range);
        renderEnabled = true;
      }

    }
  }

实时演示: https://jsfiddle.net/BlackLabel/fuzspcva/

API参考:

• https://api.highcharts.com/class-reference /Highcharts.Axis.html#setExtremes
• https://api.highcharts.com/class-reference /Highcharts.Axis.html#getExtremes

• https://api.highcharts.com/class-reference/Highcharts.Axis.html#setExtremes
• https://api.highcharts.com/class-reference/Highcharts.Axis.html#getExtremes

这篇关于用高图覆盖2个不同长度的数据系列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！