Как отобразить Нет данных Доступно в высоких диаграммах

Ответ 1

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

Ответ 2

Теперь он поддерживается в Highcharts с версии v.0.0.8

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

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

Ответ 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, чтобы вытащить данные о серии и категории, поэтому я знаю, что перед привязкой диаграммы я обнаружил, что нет плавающего элемента "Нет данных".

Ответ 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>