web-dev-qa-db-ja.com

ハイチャートでデータ利用不可メッセージを表示する方法

ハイチャートを使用してメッセージを表示できますか？データが利用できない場合メッセージを表示する必要があります例：No Data Available。データを非表示にしている場合：No Data Availableメッセージ。ハイチャートで動的に

  Highcharts.chart('container', {
  chart: {
     type: 'bubble',
     plotBorderWidth: 0,
     zoomType: 'xy'
   },
});
javascripthighchartsno-data
18
Kondal

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();

});
11
fustaki

ページにno-data-to-display.jsファイルを含めます。ハイチャートがバンドルされています。それ以外の場合はここで取得できます： https://code.highcharts.com/modules/no-data-to-display.js

デフォルトのメッセージは「表示するデータがありません」です。変更したい場合、これを行うことができます：

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

これらの他の答えのいくつかは、ちょっとおかしいように思えます...ここで私が共有したかった非常に基本的なソリューションがあります：

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>

これが誰かを助けることを願っています

9
Cumulo Nimbus

あなたのコメントに基づいて（データがまだ利用可能なデータがないことを示すデータがあるので、データがある場合はハイチャートに隠すことができます）。あなたはfustakiのソリューションを使用していると思います」 tは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();
  }
});

フィドル デモ

6
Deep 3015

最新バージョンの私にとっては、このように動作します：

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'
  }
});
1
Patrik Laszlo

現在のバージョン（v7.1.2）および接続された非データ表示モジュール（v7.1.2）では、lang.noDataオプションを設定することでPatrikが述べたように、チャートオブジェクトを作成するときに「データなし」メッセージを表示できます。

チャートの作成後にこのメッセージを変更できるようにするには、メソッドを呼び出す必要があります

yourChartObject.showNoData('you new message')
0
Starina