Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

jquery - How to show/hide categories with checkbox using highcharts?

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();
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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:

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...