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

Question

Можем ли мы показать сообщение с использованием highcharts.When данные недоступны? мы должны показать сообщение Пример: No Data Available. Если у нас есть данные hide: No Data Available сообщение. в Highcharts динамически

Highcharts.chart('container', { 

    chart: { 

    type: 'bubble', 
    plotBorderWidth: 0, 
    zoomType: 'xy' 

    }, 
}); 

Answer 1

Вы можете использовать Highcharts Chart Renderer

Вот пример в JSFiddle

var chart = new Highcharts.Chart({ 

    chart: { 
     renderTo: 'container' 
    }, 

    xAxis: { 
     categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    series: [] 

}, function(chart) { // on complete 

    chart.renderer.text('No Data Available', 140, 120) 
     .css({ 
      color: '#4572A7', 
      fontSize: '16px' 
     }) 
     .add(); 

}); 

Answer 2

не включает в себя-данных в-display.js файла в вашей странице. Он поставляется в комплекте с графическими картами. Вы можете получить его здесь иначе: https://code.highcharts.com/modules/no-data-to-display.js

По умолчанию сообщение «Нет данных для отображения». Если вы хотите изменить его, вы можете сделать это:

Highcharts.setOptions({ 
    lang: { 
     noData: 'Personalized no data message' 
    } 
}); 

Answer 3

Основываясь на ваш комментарий (, если у нас есть данные по-прежнему не показывая никаких данных доступное сообщение так, мы можем скрыть в Highcharts, если у нас есть данные). Я думаю, вы используете решение fustaki и не хотите использовать модуль no-data-to-display.js. Да, есть проблема, о которой упоминалось. Вы все равно можете использовать тот же код, изменив его. Добавляем условие внутри постоянной функции, чтобы проверить, нет ли пустых строк или нет, на основе этого сообщения рендеринга.

var chart = new Highcharts.Chart({ 

chart: { 
    renderTo: 'container' 
    }, 

    xAxis: { 
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] 
    }, 

    series: [] 

}, function(chart) { // on complete 
    if (chart.series.length < 1) { // check series is empty 
    chart.renderer.text('No Data Available', 140, 120) 
     .css({ 
     color: '#4572A7', 
     fontSize: '16px' 
     }) 
     .add(); 
    } 
}); 

Fiddle демо

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>

Надеется, что это помогает кому-то