Question

我正在创建一个包含2个系列的动态更新的高库存图表，但是开始时一个系列的渲染位置错误。当我在导航器中调整选择的大小时，该系列又回到了正确的位置。这是highstock的配置：

Highcharts.setOptions({
global: {
    useUTC: false
}
});
var groupingUnits = [['millisecond', [1, 2, 5, 10, 20, 25, 50, 100, 200, 500]],
    ['second',[1, 2, 5, 10, 15, 30]],
    ['minute',[1, 2, 5, 10, 15, 30]],
    ['day',[1]]
    ]; 
// Create the chart
Highcharts.stockChart('container', {

chart: {
    events: {
        load: function () {

            // set up the updating of the chart each second
            var series = this.series[0];
            var series1 = this.series[1];
            setInterval(function () {
                var x = (new Date()).getTime(), // current time
                    y = Math.round(Math.random() * 100);
                series.addPoint([x, y], true, false);
                series1.addPoint([x, y], true, false);
            }, 500);
        }
    }
},

rangeSelector: {
        buttons: [{
            count: 1,
            type: 'minute',
            text: '1min'
        },
        {
            count: 3,
            type: 'minute',
            text: '3min'
        }, {
            count: 5,
            type: 'minute',
            text: '5min'
        }, {
            type: 'all',
            text: 'All'
        }],
        inputEnabled: false,
        selected: 3
      },
      exporting: {
        enabled: false
      },
      title: {
          text: 'Live Chart'
      },

      yAxis: [
        {
          labels: {
              align: 'right',
              x: -3
          },
          title: {
              text: 'Line'
          },
          height: '60%',
          lineWidth: 2,
          resize: {
              enabled: true
          }
      }, 
      {
          labels: {
              align: 'right',
              x: -3
          },
          title: {
              text: 'Volume'
          },
          top: '65%',
          height: '35%',
          offset: 0,
          lineWidth: 2
      }],

      tooltip: {
          split: true
      },

      series: [
        {
          type: 'line',
          name: 'OHLC',
          data: [[]],
          dataGrouping: {
              units: groupingUnits
          }
      },
      {
          type: 'column',
          name: 'Volume',
          data: [[]],
          yAxis: 1,
          dataGrouping: {
              units: groupingUnits
          }
      }
    ]
});

我为此创建了一个小提琴： https://jsfiddle.net/xu058sgp/23/

我尝试更改yAxis的height和top属性，但是似乎没有任何方法可以解决此问题。我不确定，但这可能是由于数据更新的频率。有人可以指出我在这里做错了吗。

Answer 1

作为解决方法，您可以初始化序列，然后在添加自己的点之前删除点。

初始化：

series: [{
  type: 'line',
  name: 'OHLC',
  data: [0], //added this 0
  dataGrouping: {
    units: groupingUnits
  }
}, {
  type: 'column',
  name: 'Volume',
  data: [0], //added this 0
  yAxis: 1,
  dataGrouping: {
    units: groupingUnits
  }
}]

然后，在添加新点之前先删除点：

events: {
  load: function () {
    // set up the updating of the chart each second
    var chart = this
    var series = this.series[0];
    var series1 = this.series[1];

    //Remove 0 data
    series.setData([], false); //false to avoid redrawing, so we only redraw once per update
    series1.setData([], false);

    //update graph
    setInterval(function () {
      var x = (new Date()).getTime(), // current time
      y = Math.round(Math.random() * 100);
      series.addPoint([x, y], false, false);
      series1.addPoint([x, y], false, false);
      //redraw graph
      chart.redraw();
    }, 500);
  }
}

工作示例： https://jsfiddle.net/ewolden/xu058sgp/46/

具有多个系列的动态更新的高库存中的对齐问题

1 个答案: