Question

当数据集没有返回任何数据时，我们可以使用highcharts显示消息吗？例如：“无数据可用”

Answer 1

自v3.0.8起，现在支持Highcharts

您需要加载no-data模块，然后您可以通过lang.noData选项指定自定义消息：

Highcharts.setOptions({lang: {noData: "Your custom message"}});

Answer 2

这是根据uservoice条目添加的。

Answer 3

我使用了一些解决方法来解决这个问题。基本上我覆盖了包含“无数据显示”消息的div。

.noChartData {
     display: hidden;         
     position: absolute;
     z-index: 99;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 16px;
     font-weight: normal;
     color: #CCC;
}

<div class="noChartData">No Data to Display</div>

当页面加载时，我正在使用JQuery查找图表的位置，然后抵消“无数据”div并相应地显示它。

var chartPosition = $("#myChart").position();
$(".noChartData").css("left", chartPosition.left + 400);
$(".noChartData").css("top", chartPosition.top + 150);

您需要根据图表的大小相应地更改偏移量。我正在使用AJAX调用来提取系列和类别数据，因此我在绑定图表之前就知道是否要显示浮动的“无数据”div。

Answer 4

一个非常简单的例子：

Highcharts.setOptions({lang: {noData: "Your custom message"}})
var chart = Highcharts.chart('container', {
    series: [{
        data: []
    }]
});

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/no-data-to-display.js"></script>

<div id="container" style="height: 250px"></div>

希望这有助于某人

如何在高级图表中显示无数据可用消息

4 个答案: