欄のグラフの中央に「No Data」メッセージを表示する方法

Question

ng-google-charts.jsライブラリを使用して柱状図を表示しています。

データがある場合、縦棒グラフはこのようにレンダリングされます。 Column Chart with data

表示するデータがない場合、縦棒グラフはこのように表示されます。

Columns Chart with out data

私は解決策を見つけるために多くの時間を費やしました。しかし、解決策なしでエンディングする。

これを達成する方法を教えてもらえますか？

あなたのお手伝いをお待ちしております。

おかげ

Answer 1

あなたは空を使用し、基本的にデータなしコピーし

を表示するには、アノテーションを使用したデータテーブルは、そうであれば
空であるかどうかを確認、注釈のための行を追加
ができx軸にラベルが表示されないようにする
値として0を使用すると、「注釈を付ける」ものがあります。

if (emptyData.getNumberOfRows() === 0) { 
    emptyData.addRows([ 
    ['', 0, null, 'No Data Copy'] 
    ]); 
} 

その後、'transparent'
するannotation.stemを変更し、データがは、
存在しているときに注釈をしたくない場合は、それがチャート

annotations: { 
    stem: { 
    color: 'transparent', 
    length: 120 
    } 
} 

の中央に表示されるようにlengthを高めますアノテーションの列の値をnullに設定してください。

次のようなスニペットを参照してください。グラフを表示するには、da TA

google.charts.load('current', { 
 
    callback: function() { 
 
    // create empty data table 
 
    var emptyData = new google.visualization.DataTable({ 
 
     cols: [ 
 
     {label: 'Element', type: 'string'}, 
 
     {label: 'Density', type: 'number'}, 
 
     {role: 'style', type: 'string'}, 
 
     {role: 'annotation', type: 'string'} 
 
     ] 
 
    }); 
 
    var withData = emptyData.clone(); 
 

 
    var options = { 
 
     // set annotation for -- No Data Copy 
 
     annotations: { 
 
     // remove annotation stem and push to middle of chart 
 
     stem: { 
 
      color: 'transparent', 
 
      length: 120 
 
     }, 
 
     textStyle: { 
 
      color: '#9E9E9E', 
 
      fontSize: 18 
 
     } 
 
     }, 
 
     bar: {groupWidth: '95%'}, 
 
     height: 400, 
 
     legend: {position: 'none'}, 
 
     vAxis: { 
 
     viewWindow: { 
 
      min: 0, 
 
      max: 30 
 
     } 
 
     }, 
 
     width: 600 
 
    }; 
 

 
    // if no data add row for annotation -- No Data Copy 
 
    if (emptyData.getNumberOfRows() === 0) { 
 
     emptyData.addRows([ 
 
     ['', 0, null, 'No Data Copy'] 
 
     ]); 
 
    } 
 

 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div_0')); 
 
    chart.draw(emptyData, options); 
 

 
    withData.addRows([ 
 
     ['Copper', 8.94, '#b87333', null], 
 
     ['Silver', 10.49, 'silver', null], 
 
     ['Gold', 19.30, 'gold', null], 
 
     ['Platinum', 21.45, 'color: #e5e4e2', null] 
 
    ]); 
 

 
    chart = new google.visualization.ColumnChart(document.getElementById('chart_div_1')); 
 
    chart.draw(withData, options); 
 
    }, 
 
    packages: ['corechart'] 
 
});

<script src="https://www.gstatic.com/charts/loader.js"></script> 
 
<div id="chart_div_0"></div> 
 
<div id="chart_div_1"></div>