javascript - 优雅地处理没有数据的 amcharts

Question

我想知道我的 dataProvider 是否为空。amCharts 绘制时默认为空。我该如何动态处理它。

var chart = AmCharts.makeChart("chartdiv", {
    "theme": "none",
    "type": "serial",
    "dataProvider": data,
    "valueAxes": [{
        "title": "Income in millions, USD"
    }]

如果数据应该为空。怎么可能处理。。

Answer 1

你有两个真正的选择。

您可以做的第一件事是在调用之前检查数据，AmCharts.makeChart()并且只有在有数据时才执行该函数。如果没有任何数据，您可能希望向用户显示某种消息。

您的第二个选项是在图表本身上显示一条消息。这是 AmCharts 网站上的一个示例，可以帮助实现这一目标。

Answer 2

这可能会对您有所帮助，我遇到过这种情况，我的饼图数据来自 API 调用，它可能有一个空数组，我想在 amchart 4 中显示一些东西而不是什么都没有。

所以我在他们的网站上找到了这个对我有帮助的例子：

amchart 4中的饼图占位符

基本上它的作用是在图表数据数组为空时显示占位符（空饼图）。它看起来又漂亮又干净。

Answer 3

这就是我用 amcharts 4 解决的方法：

chart.events.on("beforevalidated", function (event) {
    // check if there's data
    if (event.target.data.length === 0) {
        chart.closeAllPopups();
        chart.modal.container = document.body;
        chart.openModal("<strong>No data found!</strong>");
    }
});