Javascript 在Highcharts中重新绘制图表的后续选项卡上不起作用的按钮

我使用Highcharts显示多个图表，每个图表位于不同的选项卡上。我在图表底部添加了一些按钮，用于打开和关闭所有系列，以及打开和关闭系列的分组。这些按钮适用于第一个选项卡，但不适用于后续选项卡。每个选项卡根据统计组转到不同的页面（图1、图2、图3）：

highchart的代码在调用的每个页面上都不同，但按钮仅在第一个选项卡上起作用。每个选项卡的数据都正确显示。下面是我正在使用的代码，其中表示每个选项卡的“StatGroup1”更改为StatGroup2，依此类推：

$from = isset($var_from) ? $var_from : strtotime('-36 hours');
$through = isset($var_through) ? $var_through : time();
//print_r(getcwd());

$stats = new cimsSonusEMS($through, $from);

$series = array();
foreach ($stats->get_cpu($statGroup) as $slot => $util) {
    $data = array();
    foreach ($util as $time => $stat) {
        $time *= 1000;
        $data[] = "[$time, $stat]";
    }

    $data_string = implode(',', $data);
    $series[] = "{ name: 'Slot $slot', type: 'spline', data: [$data_string]}";
}

?>

<div id="graph-StatGroup1"></div>
<div id="onOffButtons">
    <button id="allOn"> All Cards On </button>
    <button id="allOff"> All Cards Off </button>
    <button id="MNSoff" value="MNS Off"> MNS On/Off </button>
    <button id="PNSoff" value="PNS Off"> PNS On/Off </button>
    <button id="SPSoff" value="SPS Off"> SPS On/Off </button>
    <button id="CNSoff" value="CNS Off"> CNS On/Off </button>
</div>

<script type="text/javascript">
$(document).ready(function() {
    chartStatGroup1 = new Highcharts.Chart({
        chart: {
            renderTo: 'graph-StatGroup1',
            zoomType: 'x',
            width: 900,
            height: 400
        },
        credits: { enabled: false },
        title: { text: 'CPU Utilization by Card' },
        legend: { itemWidth: 120 },
        xAxis: {
            type: 'datetime',
            maxZoom: 1000 * 3600 * 6,
            labels: {
                formatter: function() {
                    return Highcharts.dateFormat('%b %e<br />%H:%M', this.value);
                }
            }
        },
        tooltip: {
            shared: true,
            formatter: function() {
                var tip = Highcharts.dateFormat('%A, %B %e, %l:%M %P', this.x);
                $.each(this.points, function(i, point) {
                    tip += '<br /><span style="color: ' + point.series.color + '">' + this.series.name + '</span>: ' + point.y + '%';
                });

                return tip;
            }
        },
        yAxis: {
            title: { text: null },
            min: 0,
            max: 100
        },
        plotOptions: {
            spline: {
                lineWidth: 1,
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 5
                        }
                    }
                }
            }
        },
        series: [ <?php echo implode(',', $series); ?> ]
    });
    $("#allOn").click(function(){
        var series = chartStatGroup1.series;

        for (var i = 0; i < series.length; i++) {
            series[i].setVisible(true, false);
        }
        chartStatGroup1.redraw();
        alert("All On");
        MNSoff.value = "MNS Off";
        PNSoff.value = "PNS Off";
        SPSoff.value = "SPS Off";
        CNSoff.value = "CNS Off";
    });
    $("#allOff").click(function() {
        var series = chartStatGroup1.series;

        for (var i = 0; i < series.length; i++) {
            series[i].setVisible(false, false);
        }
        chartStatGroup1.redraw();
        alert("All Off");
        MNSoff.value = "MNS On";
        PNSoff.value = "PNS On";
        SPSoff.value = "SPS On";
        CNSoff.value = "CNS On";
    });
    $("#MNSoff").click(function() {
        var series = chartStatGroup1.series;

        if (this.value == "MNS Off") {
            series[0].setVisible(false, false);
            series[1].setVisible(false, false);

            chartStatGroup1.redraw();
            alert("MNS off");
        this.value = "MNS On";
    } else {
        series[0].setVisible(true, false);
        series[1].setVisible(true, false);

        chartStatGroup1.redraw();
        alert("MNS on");
        this.value = "MNS Off";
    }
});
$("#PNSoff").click(function() {
    var series = chartStatGroup1.series;

    if (this.value == "PNS Off") {
        series[2].setVisible(false, false);
        series[3].setVisible(false, false);
        series[4].setVisible(false, false);

        chartStatGroup1.redraw();
        alert("PNS off");
        this.value = "PNS On";
    } else {
        series[2].setVisible(true, false);
        series[3].setVisible(true, false);
        series[4].setVisible(true, false);

        chartStatGroup1.redraw();
        alert("PNS on");
        this.value = "PNS Off";
    }
});
$("#SPSoff").click(function() {
    var series = chartStatGroup1.series;

    if (this.value == "SPS Off") {
        series[5].setVisible(false, false);
        series[6].setVisible(false, false);

        chartStatGroup1.redraw();
        alert("SPS off");
        this.value = "SPS On";
    } else {
        series[5].setVisible(true, false);
        series[6].setVisible(true, false);

        chartStatGroup1.redraw();
        alert("SPS on");
        this.value = "SPS Off";
    }
});
$("#CNSoff").click(function() {
    var series = chartStatGroup1.series;

    if (this.value == "CNS Off") {
        series[7].setVisible(false, false);
        series[8].setVisible(false, false);
        series[9].setVisible(false, false);
        series[10].setVisible(false, false);
        series[11].setVisible(false, false);
        series[12].setVisible(false, false);
        series[13].setVisible(false, false);

        chartStatGroup1.redraw();
        alert("CNS off");
        this.value = "CNS On";
    } else {
        series[7].setVisible(true, false);
        series[8].setVisible(true, false);
        series[9].setVisible(true, false);
        series[10].setVisible(true, false);
        series[11].setVisible(true, false);
        series[12].setVisible(true, false);
        series[13].setVisible(true, false);

        chartStatGroup1.redraw();
        alert("CNS on");
        this.value = "CNS Off";
    }
});
});
</script>

$from=isset（$var\u-from）$变量从：strotime（'-36小时'）；
$through=isset（$var\u through）$变量通过：time（）；
//打印（getcwd（））；
$stats=新的cimsSonusEMS（$to，$from）；
$series=array（）；
foreach（$stats->get_cpu（$statGroup）作为$slot=>$util）{
$data=array（）；
foreach（$util作为$time=>$stat）{
$time*=1000；
$data[]=“[$time，$stat]”；
}
$data_string=内爆（'，'，$data）；
$series[]=“{name:'Slot$Slot'，type:'spline'，data:[$data_string]}”；
}
?>
所有的牌都打开了
所有的牌都取消了
MNS开/关
PNS开/关
SPS开/关
中枢神经系统开/关
$（文档）.ready（函数（）{
chartStatGroup1=新的Highcharts.Chart({
图表：{
renderTo:'graph-StatGroup 1'，
zoomType:'x'，
宽度：900，
身高：400
},
信用证：{已启用：错误}，
标题：{text:'卡的CPU利用率'}，
图例：{itemWidth:120}，
xAxis：{
键入：“日期时间”，
最大缩放：1000*3600*6，
标签：{
格式化程序：函数（）{
返回Highcharts.dateFormat（“%b%e
%H:%M”，此.value）；
}
}
},
工具提示：{
分享：是的，
格式化程序：函数（）{
var tip=Highcharts.dateFormat（“%A，%B%e，%l:%M%P”，this.x）；
$.each（this.points，function（i，point）{
tip+='
'+this.series.name+'：'+point.y+'%；
});
返回端；
}
},
亚克斯：{
标题：{text:null}，
分:0,，
最高：100
},
打印选项：{
样条曲线：{
线宽：1，
标记：{
启用：false，
国家：{
悬停：{
启用：对，
半径：5
}
}
}
}
},
系列：[]
});
$（“#allOn”）。单击（函数（）{
var series=ChartStatGroup 1.series；
对于（变量i=0；i$from = isset($var_from) ? $var_from : strtotime('-36 hours');
$through = isset($var_through) ? $var_through : time();
//print_r(getcwd());

$stats = new cimsSonusEMS($through, $from);

$series = array();
foreach ($stats->get_cpu($statGroup) as $slot => $util) {
    $data = array();
    foreach ($util as $time => $stat) {
        $time *= 1000;
        $data[] = "[$time, $stat]";
    }

    $data_string = implode(',', $data);
    $series[] = "{ name: 'Slot $slot', type: 'spline', data: [$data_string]}";
}

?>

<div id="graph-StatGroup1"></div>
<div id="onOffButtons">
    <button id="allOn"> All Cards On </button>
    <button id="allOff"> All Cards Off </button>
    <button id="MNSoff" value="MNS Off"> MNS On/Off </button>
    <button id="PNSoff" value="PNS Off"> PNS On/Off </button>
    <button id="SPSoff" value="SPS Off"> SPS On/Off </button>
    <button id="CNSoff" value="CNS Off"> CNS On/Off </button>
</div>

<script type="text/javascript">
$(document).ready(function() {
    chartStatGroup1 = new Highcharts.Chart({
        chart: {
            renderTo: 'graph-StatGroup1',
            zoomType: 'x',
            width: 900,
            height: 400
        },
        credits: { enabled: false },
        title: { text: 'CPU Utilization by Card' },
        legend: { itemWidth: 120 },
        xAxis: {
            type: 'datetime',
            maxZoom: 1000 * 3600 * 6,
            labels: {
                formatter: function() {
                    return Highcharts.dateFormat('%b %e<br />%H:%M', this.value);
                }
            }
        },
        tooltip: {
            shared: true,
            formatter: function() {
                var tip = Highcharts.dateFormat('%A, %B %e, %l:%M %P', this.x);
                $.each(this.points, function(i, point) {
                    tip += '<br /><span style="color: ' + point.series.color + '">' + this.series.name + '</span>: ' + point.y + '%';
                });

                return tip;
            }
        },
        yAxis: {
            title: { text: null },
            min: 0,
            max: 100
        },
        plotOptions: {
            spline: {
                lineWidth: 1,
                marker: {
                    enabled: false,
                    states: {
                        hover: {
                            enabled: true,
                            radius: 5
                        }
                    }
                }
            }
        },
        series: [ <?php echo implode(',', $series); ?> ]
    });
    $("#allOn").click(function(){
        var series = chartStatGroup1.series;

        for (var i = 0; i < series.length; i++) {
            series[i].setVisible(true, false);
        }
        chartStatGroup1.redraw();
        alert("All On");
        MNSoff.value = "MNS Off";
        PNSoff.value = "PNS Off";
        SPSoff.value = "SPS Off";
        CNSoff.value = "CNS Off";
    });
    $("#allOff").click(function() {
        var series = chartStatGroup1.series;

        for (var i = 0; i < series.length; i++) {
            series[i].setVisible(false, false);
        }
        chartStatGroup1.redraw();
        alert("All Off");
        MNSoff.value = "MNS On";
        PNSoff.value = "PNS On";
        SPSoff.value = "SPS On";
        CNSoff.value = "CNS On";
    });
    $("#MNSoff").click(function() {
        var series = chartStatGroup1.series;

        if (this.value == "MNS Off") {
            series[0].setVisible(false, false);
            series[1].setVisible(false, false);

            chartStatGroup1.redraw();
            alert("MNS off");
        this.value = "MNS On";
    } else {
        series[0].setVisible(true, false);
        series[1].setVisible(true, false);

        chartStatGroup1.redraw();
        alert("MNS on");
        this.value = "MNS Off";
    }
});
$("#PNSoff").click(function() {
    var series = chartStatGroup1.series;

    if (this.value == "PNS Off") {
        series[2].setVisible(false, false);
        series[3].setVisible(false, false);
        series[4].setVisible(false, false);

        chartStatGroup1.redraw();
        alert("PNS off");
        this.value = "PNS On";
    } else {
        series[2].setVisible(true, false);
        series[3].setVisible(true, false);
        series[4].setVisible(true, false);

        chartStatGroup1.redraw();
        alert("PNS on");
        this.value = "PNS Off";
    }
});
$("#SPSoff").click(function() {
    var series = chartStatGroup1.series;

    if (this.value == "SPS Off") {
        series[5].setVisible(false, false);
        series[6].setVisible(false, false);

        chartStatGroup1.redraw();
        alert("SPS off");
        this.value = "SPS On";
    } else {
        series[5].setVisible(true, false);
        series[6].setVisible(true, false);

        chartStatGroup1.redraw();
        alert("SPS on");
        this.value = "SPS Off";
    }
});
$("#CNSoff").click(function() {
    var series = chartStatGroup1.series;

    if (this.value == "CNS Off") {
        series[7].setVisible(false, false);
        series[8].setVisible(false, false);
        series[9].setVisible(false, false);
        series[10].setVisible(false, false);
        series[11].setVisible(false, false);
        series[12].setVisible(false, false);
        series[13].setVisible(false, false);

        chartStatGroup1.redraw();
        alert("CNS off");
        this.value = "CNS On";
    } else {
        series[7].setVisible(true, false);
        series[8].setVisible(true, false);
        series[9].setVisible(true, false);
        series[10].setVisible(true, false);
        series[11].setVisible(true, false);
        series[12].setVisible(true, false);
        series[13].setVisible(true, false);

        chartStatGroup1.redraw();
        alert("CNS on");
        this.value = "CNS Off";
    }
});
});
</script>

$(document).on({
    click: function () {
        var series = chartCMHGSX2.series;

        for (var i = 0; i < series.length; i++) {
            series[i].setVisible(true, false);
        }
        chartCMHGSX2.redraw();
        alert("All On");
        MNSoff.value = "MNS Off";
        PNSoff.value = "PNS Off";
        SPSoff.value = "SPS Off";
        CNSoff.value = "CNS Off";
    }
}, '#allOn');