如何使用highcharts用复选框显示/隐藏类别？ [英] How to show/hide categories with checkbox using highcharts?

问题描述

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

  var categories = chart.categories [0]; 
 if（categories.graphic.visibility =='hidden'）{
 categories.graphic.show（）; 
} else {
 categories.graphic.hide（）; 
 
  

解决方案

这似乎很漂亮以各种形式提供的常见问题以及各种解决方案。

我创建了一个演示程序，以一种动态构建于预处理类别数组和对象。

• 它使用类别数组构建复选框。




• 在点击然后循环遍历预定义的系列对象，并且对于每个系列循环通过数据构建一个新的数组，只包含检查框的点。

使用 setData

• 依赖于每个数据点 name 属性指定，并且每个系列具有 id speci
  





演示：

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

在小提琴中还有很多其他的事情 - 它动态地从随机生成的数据中创建盒图，并动态地构建一个类别数组 - 这些都不重要达到目的。它们产生了上面提到的内容：用于a）构建复选框的类别数组，以及b）为每个数据点填充名称，以及一系列对象循环以构建图表系列。

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

使用3列系列的瘦身版：

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

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

重要的函数是：

• buildCheckboxes（）

• code> rebuildData（）




• $（document）.on（'click'，'＃check-boxes input'... listener






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




I want show/hide some categories in highcharts using checkbox, can you help me? This is my code so far:

var categories = chart.categories[0];
if(categories.graphic.visibility == 'hidden'){
    categories.graphic.show();
} else {
    categories.graphic.hide();
}

解决方案

This seems to be a pretty common question in a variety of forms, and with a variety of solutions.

I have created a demo to do this in a way that is dynamically built upon a pre-processed category array and series object.

• It uses the array of categories to build a list of checkboxes for each.

• On click, it looks through the list to determine which boxes are checked.

• Then it loops through the predefined series object, and for each series loops through the data and builds a new array containing only the points for which the boxes are checked.

• Uses setData on each series to update the points/categories displayed.

• relies on each data point having the name attribute specified, and each series having an id specified.

Demo:

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

There are a number of other things going on in the fiddle - it dynamically creates box plots out of randomly generated data, and dynamically builds a category array - these are unimportant to the purpose. They result in what is mentioned above: a categories array, which is used to a) build the checkboxes, and b) populate the name for each data point, and a series object to loop through to build the chart series.

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

A slimmer version, using 3 column series:

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

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

The functions that matter are:

• buildCheckboxes()

• rebuildData()

• The $(document).on('click', '#check-boxes input'... listener

This requires proper pre-processing of your data, but should be able to work with any number and type of series.

这篇关于如何使用highcharts用复选框显示/隐藏类别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！