javascript - 按钮在后续选项卡上无法在 Highcharts 中重绘图表

Question

我正在使用 Highcharts 显示多个图表，每个图表位于不同的选项卡上。我在图表底部添加了一些按钮来打开和关闭所有系列，以及打开和关闭系列分组。这些按钮适用于第一个选项卡，但不适用于后续选项卡。每个选项卡根据统计组(Chart1、Chart2、Chart3)进入不同的页面:

<a href="path_to_file/ajax.<?php echo $statGroup; ?>.php?host=<?php echo $statGroup; ?>&from=<?php echo $from; ?>&through=<?php echo $through; ?>"><?php echo $statGroup; ?></a>

Highcharts 的代码在调用的每个页面上都不同，但按钮仅适用于第一个选项卡。每个选项卡的数据都正确显示。这是我正在使用的代码，其中每个选项卡的“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>

我无法使用 Highstock，只能使用 Highcharts。谢谢。

更新:

有效的代码如下:

$(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');

非常感谢@popnoodles的帮助!

Answer 1

这是因为 highcharts 正在动态创建元素。当 JS 执行时，只有当时存在的元素知道它们所接受的指令。

幸运的是，当您单击某些内容时，除非明确告知不要这样做，否则该单击会一直冒泡到文档。

因此，您要做的就是将事件绑定(bind)到任何存在且不会被覆盖的祖先，故障安全是 document，并将事件委托(delegate)给您想要与之交互的元素，该元素在 JS 执行时可能存在也可能不存在。只要祖先存在，指令就会被记录下来。

所以，这个 $('#something').click(function(){}) 可能会工作一次，但是 #something 会被覆盖，它的替换不会'不知道说明。

有了这个 $(document).on('click', '#something', function(){}) document 确实知道指令，听到了点击声，如果#something是目标或目标的祖先，则将执行该指令。