Highcharts 更新图表滚动问题-滚动到初始位置

Question

我在使用 Highcharts highstock 柱形图时遇到问题。 xaxis min=0, max=5 [page size] 有 20 个类别。初始加载后，将 x 轴滚动到末尾，然后单击修改数据。在此操作中，我将调用 api 并更新系列数据。 'The chart displays as No data to display'即使只有一类。我想将滚动重置为初始位置，但我不能为类别做这件事。您将需要手动移动卷轴

另外由于只有一个类别，我不希望其他类别显示为数字。 https://jsfiddle.net/shashi3337/zcf8kvgx/7/

我正在更新图表以修改 xaxis 最小值和最大值以将最大值设置为 0 [ 1 类别] 以删除数字。 https://jsfiddle.net/shashi3337/zcf8kvgx/5/.

现在，当您单击“添加数据”时，会添加回数据。我正在重置 min=0 和 max=5。现在我只看到每页滚动只有 1 个类别。

预期行为我希望滚动条在我单击修改数据按钮后自动向后滚动，当我单击添加数据按钮时我希望在 x 轴上看到每页滚动 6 个类别。

function test(n) {
  var data = [];
  for (var i = 0; i < n; i++) {
    var value = Math.random() * 10;
    var x = {
      id: i,
      name: 'test ' + i,
      y: value
    }
    data.push(x);
  }
  return data;
}

var chart = Highcharts.chart('container', {
  chart: {
    type: 'column',
  },
  plotOptions: {
    column: {
      stacking: 'normal'
    },
  },
  xAxis: {
    type: 'category',
    min:0,
    max:5
  },
  scrollbar: {
    enabled: true
  },
  series: [{
      name: "A",
      data: test(20)
    }, {
      name: "B",
      data: test(20)
    },
    {
      name: "C",
      data: test(20)
    },
    {
      name: "D",
      data: test(20)
    }
  ]
});


$(document).ready(function(){
  $('#modify').click(function(){
   if(chart){
    while (chart.series.length > 0)
         chart.series[0].remove(true);


     chart.addSeries({
     name: 'new',
        data: test(1)
     });
    }
  });

  $('#add').click(function(){
   if(chart){
    while (chart.series.length > 0)
         chart.series[0].remove(true);

    chart.update({
      xAxis: {
        min:0,
        max:5
        }
     });

     chart.addSeries({
     name: 'A',
        data: test(20)
     });
    }
  });
});

Answer 1

找到了答案。

您需要使用 xAxis.setExtremes() 来修改图表上的极值。此时，用户设置的极端（例如通过滚动条）具有最高优先级，并且在您删除所有系列时不会被清除。

示例https://jsfiddle.net/BlackLabel/pp2qpxks/

 chart.xAxis[0].setExtremes(0, 0);

Highcharts 更新图表滚动问题-滚动到初始位置

Highcharts update chart scroll issue- scroll to initial position

highcharts

highstock

highcharts-ng

angular2-highcharts