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（http://code.highcharts.com/modules/no-data-to-display.js）有一个“ 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回答。

如何在Highcharts中显示错误消息？

1 个答案: