表示するデータがありませんハイチャートのメッセージ

Question

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

Highcharts.chart('container', { 

    chart: { 

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

    }, 
}); 

Answer 1

あなたはここに

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

JSFiddleの例では、あなたのページには、データ・ツー・display.jsファイルが含まれていないのですHighcharts Chart Renderer

使用することができます。それはハイチャートで束ねられています。そうでない場合は、ここで取得できます。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>

ホープ、この助けてくれる人