在Highcharts中使用按钮/复选框显示/隐藏数据的示例

Example to show/hide data with buttons/checkbox in Highcharts?

本文关键字:数据 隐藏 显示 复选框 按钮 Highcharts      更新时间:2023-09-26

我想知道是否有一种方法来显示/隐藏系列,基于按钮或复选框

我想把所有的数据放在一个大的图中,但为了不使它太混乱,我想在运行时决定显示哪些数据。

这可能吗?有一个例子,我可以使用作为模板?我有大约12个不同的数据集;这意味着我还需要弄清楚如何从不同的文件加载不同的数据,而不写12个不同的get data函数。

Highcharts有一个API调用来做你想做的事情。您要的电话是系列电话。Hide或series.show.

例如,以下代码(来自highchars自己的示例)将切换一个系列的开和关:

    var series = chart.series[0];
    if (series.visible) {
        series.hide();
        $button.html('Show series');
    } else {
        series.show();
        $button.html('Hide series');
    } 

http://api.highcharts.com/highcharts Series.show

http://jsfiddle.net/gh/get/jquery/1.7.2/hililide-software/highcharts.com/tree/master/samples/highcharts/members/series-hide/