如何使用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();
这似乎很漂亮以各种形式提供的常见问题以及各种解决方案。
我创建了一个演示程序,以一种动态构建于预处理类别数组和对象。
-
它使用类别数组构建
复选框
。 -
在
点击
然后循环遍历预定义的系列
对象,并且对于每个系列循环通过数据构建一个新的数组,只包含检查框的点。 使用 -
依赖于每个数据点
name
属性指定,并且每个系列具有id
speci
setData $ c $每一个系列上的每个数据点都会更新显示的点数/类别。
演示:
在小提琴中还有很多其他的事情 - 它动态地从随机生成的数据中创建盒图,并动态地构建一个类别数组 - 这些都不重要达到目的。它们产生了上面提到的内容:用于a)构建复选框的类别数组,以及b)为每个数据点填充名称
,以及一系列对象循环以构建图表系列。
{{edit ---------------
使用3列系列的瘦身版:
--------------- / edit}}
重要的函数是:
-
buildCheckboxes()$ c
- 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 anid
specified.
Demo:
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:
--------------- /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屋!