javascript - 检查所有图表的数据并隐藏没有数据的图表

Question

我正在尝试检查我用 highcharts 制作的图表是否有任何关于加载 和图表的每次重绘 的数据。 p>

我用这段代码让它工作:

(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 个不同的图表，当其中一个没有数据时，它会隐藏所有图表。

我尝试修改代码并将 chart 传递给 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 和 Google 进行挖掘，但我找不到任何东西。

谢谢。

编辑:

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

Answer 1

好吧，我很快就找到了解决方案，所以我发布了完整的工作示例:

<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>

确实是图表本身的识别问题。此代码将从 data-name 中获取图表名称容器的属性，并使用它来显示/隐藏 ID 以 container- 开头的 div和 message-并以 data-name 中设置的名称结尾属性。

您唯一需要做的就是按照上面指定的方式为每个图表和消息设置自己的唯一 ID。

希望这对某人有帮助。