我正在尝试检查我用高图表制作的图表是否有加载和每次重绘图表的数据。
我让它使用以下代码工作：
(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和谷歌，但我找不到任何东西。
谢谢。
编辑：
我设法找到了问题并解决了它。这是图形标识符...函数本身按预期工作。
好吧，我设法很快找到了解决方案，所以我发布了完全工作的示例：
<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并使用它来显示/隐藏div，其 ID 以 container- 和 message- 开头，并以data-name属性中设置的名称结尾。
您唯一要做的就是让每个图形和消息都设置上自己唯一 ID，如上所述。
希望这对某人有所帮助。