Как отобразить Нет данных Сообщение в highcharts

Question

Можем ли мы отображать сообщение с использованием высоких диаграмм, когда набор данных не возвращает никаких данных? Например: «Нет данных»

Answer 1

Это было добавлено за запись uservoice.

Answer 2

Я использовал небольшое обходное решение для решения этой проблемы. В основном я накладываю 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 3

Он теперь поддерживается в Highcharts так v3.0.8

Вам необходимо загрузить no-data модуль, а затем, вы можете указать пользовательское сообщение через lang.noData вариант:

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

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>

Надеюсь, что это поможет кому-то