Question

我正在尝试检查使用 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));

但后来我才得到这个错误：

Uncaught TypeError: Cannot read property 'call' of undefined

我猜它是因为你唯一可以做的就是传递函数名而不是参数（如果可以，那么我没有找到他们的API中的方法）。

现在我必须为每个图表使用它，这不是我想要的，也不能正确检测重绘：

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

有人知道如何实现这个目标吗？

我花了很长时间来挖掘他们的API和谷歌，但我找不到任何东西。

感谢。

修改

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

Answer 1

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

let newValue = value + 90

识别图表本身确实存在问题。此代码将从容器的<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>属性中获取图表的名称，并使用它来显示/隐藏ID为＆＃39;以data-name和container-开头，并以＆＃结尾的名称结尾39; s在message-属性中设置。

您唯一需要做的就是让每个图表和消息都设置有上面指定的唯一ID。

希望这有助于某人。

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

1 个答案: