Javascript 检查所有图表中的数据并隐藏没有数据的图表

我试图检查我用highcharts制作的图表，看它们是否有任何加载数据，以及图表的每一次重画

我使用以下代码使其工作：

(function (H) {

    var chartPrototype = H.Chart.prototype;

    // Hide graph if there are no data, show it othervise
    function handleNoData() {
        name = $(".graph_identifier").attr("data-name");

        if (this.series.length > 0 && this.series[0].data.length > 0) {
            $('#message-'+name).fadeOut(250, function(){
                $('#container-'+name+', #table-'+name).fadeIn(250);
            });             
        } else {
            $('#container-'+name+', #table-'+name).fadeOut(250, function(){
                $('#message-'+name).fadeIn(250);
            });             
        }
    }

    // Add event listeners
    chartPrototype.callbacks.push(function (chart) {
        H.addEvent(chart, 'load', handleNoData);
        H.addEvent(chart, 'redraw', handleNoData);
    });

}(Highcharts));

问题是，只有当每页都有单个图形时，此代码才能工作。但在我的主页上，我有5个不同的图表，当其中一个没有数据时，它会隐藏所有的图表

我试图修改代码并将图表传递到

handleNoData

函数，如下所示：

H.addEvent(chart, 'load', handleNoData(chart));
H.addEvent(chart, 'load', printPage);
H.addEvent(chart, 'redraw', handleNoData(chart));

但是我得到了这个错误：

未捕获类型错误：无法读取未定义的属性“调用”

我猜这是因为您唯一能做的事情就是传递函数名而不是参数（如果可以，那么我没有在他们的API中找到如何传递）

现在，我必须对每一个图形都使用它，这不是我想要的，而且它无法正确检测重绘：

chart = $("#container").highcharts();
$(chart).on('load redraw', handleNoData(chart));

有人知道如何做到这一点吗

我花了很长时间通过他们的API和谷歌搜索，但我什么也找不到

谢谢

编辑：

---

我设法找到了问题并解决了它。它是图形标识符。。。函数本身按预期工作。

嗯，我很快找到了解决方案，所以我发布了一个完整的工作示例：

<div id="container-graph_name" class="graph-container" data-name="graph_name"></div>
<div id="message-graph_name" class="message-container">No data to show</div>

<script>
    (function (H) {

        var chartPrototype = H.Chart.prototype;

        // Hide graph if there are no data, show it othervise
        function handleNoData() {
            var name = $(this.renderTo).attr("data-name");

            if (this.series.length > 0 && this.series[0].data.length > 0) {
                $('#message-'+name).fadeOut(250, function(){
                    $('#container-'+name+').fadeIn(250);
                });
            } else {
                $('#container-'+name+').fadeOut(250, function(){
                    $('#message-'+name).fadeIn(250);
                });
            }
        }

        // Add event listeners
        chartPrototype.callbacks.push(function (chart) {
            H.addEvent(chart, 'load', handleNoData);
            H.addEvent(chart, 'redraw', handleNoData);
        });

    }(Highcharts));
</script>

没有数据显示
（职能（H）{
var chartPrototype=H.Chart.prototype；
//隐藏图形如果没有数据，则以其他方式显示
函数handleNoData（）{
var name=$（this.renderTo.attr（“数据名”）；
if（this.series.length>0&&this.series[0].data.length>0）{
$（'#message-'+name）.fadeOut（250，function（）{
$（#container-'+name+）.fadeIn（250）；
});
}否则{
$（“#容器-”+name+）.fadeOut（250，function（）{
$（'#message-'+name）.fadeIn（250）；
});
}
}
//添加事件侦听器
chartPrototype.callbacks.push（函数（图表）{
H.附录（图表“荷载”，扶手）；
H.附录（图表“重新绘制”，handleNoData）；
});
}（高图）；

这确实是识别图表本身的问题。此代码将从容器的

数据名

属性中获取图表的名称，并使用它显示/隐藏ID以

容器-

和

消息-

开头，以

数据名

属性中设置的名称结尾的div

您必须做的唯一一件事是，按照上面的指定，使用自己的唯一ID设置每个图形和消息

希望这对别人有帮助