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

Ответ 1

Вы можете использовать Экранный рендеринг Highcharts

Вот пример в 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();

});

Ответ 2

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

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

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

Ответ 3

Некоторые из этих других ответов кажутся сумасшедшими... вот супер базовое решение, которое я хотел бы разделить:

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

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

Ответ 5

Для меня с последней версией это работает так:

const Highcharts = require('highcharts');

import NoDataToDisplay from 'highcharts/modules/no-data-to-display';
NoDataToDisplay(Highcharts);

Highcharts.setOptions({
  lang: {
    noData: 'No data is available in the chart'
  }
});

Ответ 6

С текущей версией (v7.1.2) и подключенным модулем без данных для отображения (v7.1.2) вы можете показать свое сообщение "без данных" при создании объекта диаграммы, как сказал Патрик, установив опцию lang.noData.

Чтобы иметь возможность изменить это сообщение после создания диаграммы, необходимо вызвать метод

yourChartObject.showNoData('you new message')