如何使用highcharts显示/隐藏带有复选框的类别？

Question

我希望使用复选框在高级图表中显示/隐藏某些类别，你能帮帮我吗？到目前为止，这是我的代码：

$a1 = new DateTime('2015-9-24');
$a2 = new DateTime('2015-12-25');

$interval = $a2->diff($a1);

 $interval->format('%m months');

Answer 1

这似乎是一个非常常见的问题，有各种形式，并有各种解决方案。

我已经创建了一个演示，以一种动态构建在预处理类别数组和系列对象上的方式完成此操作。

• 它使用类别数组为每个类别构建checkboxes列表。

• 在click上，它会查看列表以确定选中哪些框。

• 然后循环遍历预定义的series对象，并且每个系列循环遍历数据并构建一个新数组，其中仅包含检查框的点。

• 在每个系列中使用setData来更新显示的点数/类别。

• 依赖于指定了name属性的每个数据点，并且每个系列都指定了id。

演示：

• http://jsfiddle.net/jlbriggs/nLcu3f7h/

小提琴中还有许多其他事情 - 它会随机生成数据中的动态创建框图，并动态构建类别数组 - 这些对于此目的并不重要。它们导致上面提到的：一个categories数组，用于a）构建复选框，b）为每个数据点填充name，并循环一个系列对象来构建图表系列。

{{edit ---------------

更简洁的版本，使用3列系列：

• http://jsfiddle.net/jlbriggs/wqwawuLq/

--------------- / edit}}

重要的功能是：

• buildCheckboxes()

• rebuildData()

• $(document).on('click', '#check-boxes input'...听众

这需要对数据进行适当的预处理，但应该能够处理任何数量和类型的系列。