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();
}

回答1:

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.

来源：https://stackoverflow.com/questions/32776861/how-to-show-hide-categories-with-checkbox-using-highcharts

标签

jquery

Highcharts