Highcharts 绘图之间的交互性 - 寻找代码改进

【问题标题】：Highcharts Interactivity between plots - looking for code improvementsHighcharts 绘图之间的交互性 - 寻找代码改进
【发布时间】：2021-01-27 21:16:17
【问题描述】：

我有一组带有 Highcharts 和回调函数的互连图表。具体来说，将带有 x 轴范围选择的散点图放在一起，该散点图连接到一个条形图，该条形图按类别反映所选点的平均 y 值。

它在创建图表时使用'events'键来调用编辑和重绘条形图的函数。

请点击此沙箱链接查看我整理的示例：https://codesandbox.io/s/youthful-browser-mid8x?file=/index.html

我想知道通过改进是否可以更好地编写代码。如果有人可以请审查并让我知道。谢谢。

【问题讨论】：

标签： javascript jquery highcharts

【解决方案1】：

你不需要在setData之后调用redraw：

 function update_chart2(xmin, xmax) {
   ...
   chart2.series[0].setData(new_data);
   // chart2.redraw(); - redraw is called in setData
 }

您可以使用 plot-band 选项更新 xAxis，而不是删除和添加它。

 events: {
   selection: function (event) {
     ...
     if (event.xAxis) {
       xmin = event.xAxis[0].min;
       xmax = event.xAxis[0].max;

       this.xAxis[0].update(
         {
           plotBands: [
             {
               from: xmin,
               to: xmax
             }
           ]
         },
         false
       );
     }
     update_chart2(Math.floor(xmin) + 1, Math.floor(xmax) + 1);
   },
   ...
 }

API 参考：

https://api.highcharts.com/class-reference/Highcharts.Series#setData

https://api.highcharts.com/class-reference/Highcharts.Axis#update

【讨论】：