Question

我想做什么：我有一个基本的折线图，该折线图是初始加载的数据数组（序列：[...]），可以说是x线。我还将在图表上方显示x复选框。在单击复选框之一时，相应的行应消失或出现。因此，我正在监听click事件，然后要添加或删除一行。

问题：我不知道如何用新的替换整个系列。我发现的是setData（）方法，但这仅适用于数据数组的项目。我还发现了addSeries（）方法，它将添加一个项目。然后remove（）将删除特定项目。问题是，我不知道哪个是哪个项目。我想要隐藏一条线或显示它们，但始终在数据系列中保留完整的x条线。我想。

我还发现了update（）方法，该方法可以让我将新的配置对象传递给图表，但如果我传递选项'series：newData（array）'，则该方法不起作用。

我正在寻找一个选项，以便在开始时传递完整的数据数组，然后隐藏或显示一行，或者用新数组覆盖任何给定的完整序列数据。

希望那是可以理解的，有人可以指出我所缺少的！谢谢！

Answer 1

我找到了解决方案。我会在开始时加载整个数据数组，并使用visible：false选项为初始显示显示或隐藏某些序列。

单击复选框，我需要找到正确的系列，然后有show（）和hide（）方法在运行时操纵该可见属性。

class Transportation {
   kind: string;
   speed: number;
   initialSpeed: number = 0;

   constructor(kind: string, speed:number) {
     this.kind = kind;
     this.speed = speed;
   }
   start() {
     let begin = setInterval(this.calcSpeed.bind(this), 1000);
   }
   calcSpeed() {
     console.log("initial speed: ", this.initialSpeed);
    return this.initialSpeed = this.speed + this.initialSpeed;
   }
}

let car = new Transportation("car", 50);
console.log(car);
car.start();

Answer 2

您可以将setVisible方法用于系列，并将复选框与系列绑定：

var checkboxes = document.getElementById('checkboxes').children;

for (var i = 0; i < checkboxes.length; i++) {
    (function(i) {
        checkboxes[i].addEventListener('change', function() {
            chart.series[i].setVisible(this.checked);
        });
    })(i);
}

实时演示：http://jsfiddle.net/BlackLabel/ur31g4j5/

API参考：https://api.highcharts.com/class-reference/Highcharts.Series#setVisible

更新图表的整个数据系列

2 个答案: