javascript - 如何在 Highcharts 中显示错误信息？

Question

我通过 ajax 调用动态地将数据加载到我的 Highcharts。在进行 ajax 调用时，我使用“.showLoading”函数为用户显示微调器，完成后我隐藏微调器并显示数据。现在我正在尝试为 ajax 调用实现错误处理。如果请求失败，我想隐藏微调器并显示错误消息。

my_chart = Highcharts.chart(...)  // create my desired chart with no data

my_chart.showLoading('<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>'); // show spinner while loading

$.getJSON('/chart_JSON', function(data){ // load data via ajax
    my_chart.addSeries(...) // add data to chart
    my_chart.hideLoading(); // hide spinner
})
.fail(function() {
    my_chart.hideLoading(); // hide spinner
    // display error message in place of chart ???
})

Highcharts 有“no-data-to-display.js”插件(http://code.highcharts.com/modules/no-data-to-display.js)。如果其中没有数据，它会在每个图表的中心显示响应消息。您可以使用

对其进行自定义

Highcharts.setOptions({lang: {noData: "my message"}})

但是:

• 在加载图表数据时也会显示消息(在我的微调器下)

• 所有图表的消息都相同

我希望我的错误消息类似于“服务器错误，尝试重新加载页面”，但我不想在加载图表时显示它。我怎样才能以最灵敏和最自然的方式做到这一点？

Answer 1

这可以通过提到的“no-data-to-display.js”插件及其“.hideNoData()”、“.showNoData()”函数来完成。

my_chart = Highcharts.chart(...)  // create my desired chart with no data

my_chart.hideNoData();
my_chart.showLoading('<i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>'); // show spinner while loading

$.getJSON('/chart_JSON', function(data){ // load data via ajax
    my_chart.addSeries(...) // add data to chart
    my_chart.hideLoading(); // hide spinner
})
.fail(function() {
    my_chart.hideLoading(); // hide spinner
    my_chart.showNoData("Server error, please reload page");
})

感谢@ewolden 的回答。