Highcharts - 如何在多图表上单独处理滚动条

Question

方案

我有2个数据源10/20记录。

• data.src10.series和data.src10.categories
• data.src20.series和data.src20.categories

show_rank_limit此功能将显示左侧的所有排名

• 当我点击latest top 10按钮时，它将

  • 显示10级
  • 无滚动条
  • 切换到10条记录数据源data.src10

• 当我点击latest top 20按钮时，它将

  • 显示20级
  • 滚动条
  • 切换到20条记录数据源data.src20

• 两者都保持10级的高度。

我的问题

如何在多图表上单独处理。

• 当我致电chart1.series[0].setData时，它会清除我的风格和一些数据，不应该发生！为什么呢？

  

• 我是否使用了redraw个活动？当我使用滚动条时，它会导致redraw太多。

  redraw: function(event) {
      cfg.common.fun.show_rank_limit(this);
  }
  

• 当我点击latest top 20时，它会保持10个等级高度，但无法向下滚动。

• 我找到了什么。我把'AAAAA BBBBB', 'AAAA-BBBBB'放到数据上，似乎无法正常显示。它可以采取HTML标签。 （例如<b></b>）见上面的截图。

html代码

<div id="container1" class="container" ...></div>
<br>
<div id="container2" class="container" ...></div>

js code

show_rank_limit: function(that) {
    $("text.rank").remove();//remove all rank before render
    ...
}

var barchart1 = cfg.common;
barchart1.series = data.src20.series;
barchart1.xAxis.categories = data.src10.categories;
barchart1.title.text = 'barchart 1';

var barchart2 = _.cloneDeep(barchart1);
barchart2.title.text = 'barchart 2';

var chart1 = Highcharts.chart('container1', barchart1);
var chart2 = Highcharts.chart('container2', barchart2);

$('#top10').click(function() {
  chart1.series[0].setData(data.src10.series, false);
  chart1.xAxis[0].setCategories(data.src10.categories, false);
  chart1.xAxis[0].update({
    scrollbar: {
      enabled: false
    }
  });
});

$('#top20').click(function() {
  chart1.series[0].setData(data.src20.series, false);
  chart1.xAxis[0].setCategories(data.src20.categories, false);
  chart1.xAxis[0].update({
    scrollbar: {
      enabled: true
    }
  });
});

```

DEMO：https://jsfiddle.net/puff0211/6rxd31xk/

有谁知道如何解决这个问题？

谢谢！

Answer 1

查看有关setData的文档。它认为你与系列混淆。 setData更新系列内的数据，并且您传递的是系列而不是数据。

使用chart1.series[0].setData(data.src10.series[0].data, false);更新 chart1.series[0].setData(data.src20.series[0].data, false);

$('#top10').click(function() {
  chart1.series[0].setData(data.src10.series[0].data, false);
  chart1.xAxis[0].setCategories(data.src10.categories, false);
  chart1.xAxis[0].update({
    scrollbar: {
      enabled: false
    }
  });
});

$('#top20').click(function() {
  chart1.series[0].setData(data.src20.series[0].data, false);
  chart1.xAxis[0].setCategories(data.src20.categories, false);
  chart1.xAxis[0].update({
    scrollbar: {
      enabled: true
    }
  });
});

Fiddle演示