代码之家  ›  专栏  ›  技术社区  ›  Shashi

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

  •  0
  • Shashi  · 技术社区  · 8 年前

    我对Highcharts highstock柱形图有问题。xaxis最小值=0,最大值=5[页面大小],其中有20个类别。 初始加载后,将X轴滚动到末尾,然后单击修改数据。在此操作中,我将调用api并更新序列数据。”图表显示为“即使有一个类别,也没有要显示的数据”。我想将滚动重置为初始位置,但我无法对类别执行此操作。您需要手动移动滚动条

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

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

    现在,当您单击Add data(添加数据)以添加回数据时。我正在重置最小值=0和最大值=5。现在 我只看到每页只有一个类别的滚动。

    预期行为 我希望在单击modify data(修改数据)按钮后滚动条会自动向后滚动,当我单击add data(添加数据)按钮时,我希望在xaxis上看到每页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)
         });
        }
      });
    });
    
    1 回复  |  直到 8 年前
        1
  •  1
  •   Shashi    8 年前

    找到了这个问题的答案。

    您需要使用xAxis。SetExtrems()修改图表上的极端值。此时,用户设置的极端值(如滚动条)具有最高优先级,并且在删除所有序列时不会清除。

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

     chart.xAxis[0].setExtremes(0, 0);
    
    推荐文章