将图表系列数组与新数组进行比较以确定添加/删除

Question

我正在为 highcharts 编写淘汰赛绑定，因此我有一个可观察的 highcharts series 对象数组，我想通过使用 highcharts api 根据需要添加和/或删除系列来绑定到图表。

这是我的bindingHandler 的轮廓（对于非淘汰赛，这是将我的 ViewModel 与绑定到它的 UI 元素联系起来的位）。

ko.bindingHandlers.series = {
    update: function(element, valueAccessor, allBindings, viewModel, bindingContext) {
        if(element.highChart === undefined){
            console.warn('Element ' + element.id + ' not attached to a highchart binding');
            return;
        }
        var value = valueAccessor();
        var valueUnwrapped = ko.unwrap(value);
        var chart = element.highChart;
        var series = chart.series;
        if($.isArray(valueUnwrapped)){
            // In here is my question
        }
    }
}

上面的评论是我的问题的症结所在。此时我有两个 javascript 变量

• series - 当前显示的 highcharts 系列对象数组
• valueUnwrapped - 现在应该显示的一组 highcharts 系列对象

比较这两个数组以确定的有效方法是什么

• 应该使用remove method 删除series 数组上的哪些实例
• valueUnwrapped 数组上的哪些实例应该使用addSeries method 添加

如果有帮助，有一个有用的 get method 可以通过 id 获取系列，我很高兴在我的所有系列中都有一个 id。那是在chart 对象上，您还将在上面的示例代码中看到它。

我当然可以真的很懒并清除图表

while(series.length > 0)
     series[0].remove(false);

然后从我的数组中再次添加它们。我想知道是否有更好的方法。

Answer 1

我认为，“懒惰”的方式一点也不懒惰。即使您为每个系列设置了“id”，Highcharts 中的get() 函数也会遍历所有系列以找到一个。如果您有 10 个系列，您将执行 10 次 for 循环。事实上它也检查轴和点，所以它没有你想象的那么快。

我会坚持

while(series.length > 0)
   series[0].remove(false);

$(valueUnwrapped).each(function(el, in){
    chart.addSeries(el, false);
});

chart.redraw();

仅此而已：只有两个性能良好的“for”循环。在检查和比较系列是否需要删除或更新或只是新数据集不值得时（在我看来）。

我认为您可以尝试为淘汰赛（没有 highcharts 标记）创建新问题，例如：'如何根据 ID 比较两个对象数组' os 之类的；）