縦棒グラフの描画を検討していますが、データ ソースからデータを取得できません。「テーブルに列がありません」という赤いデフォルト メッセージを表示する代わりに、空のグラフを描画するにはどうすればよいですか?
34250 次
3 に答える
17
私がしていることは、1つの列と1つのデータポイント(0に設定)でチャートを初期化することです。次に、データが追加されるたびに、列が1つだけで、それがダミー列であるかどうかを確認してから、それを削除します。また、凡例を非表示にして、ダミーの列が表示されないようにします。次に、新しい列が追加されたときに凡例を追加します。
これが、私が話していることを実行するGoogleVisualizationPlaygroundにプラグインできるサンプルコードです。空のグラフが2秒間表示されます。その後、データが追加され、列が表示されます。
var data, options, chart;
function drawVisualization() {
data = google.visualization.arrayToDataTable([
['Time', 'dummy'],
['', 0],
]);
options = {
title:"My Chart",
width:600, height:400,
hAxis: {title: "Time"},
legend : {position: 'none'}
};
// Create and draw the visualization.
chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
chart.draw(data,options);
setTimeout('addData("12:00",10)',2000);
setTimeout('addData("12:10",20)',3000);
}
function addData(x,y) {
if(data.getColumnLabel(1) == 'dummy') {
data.addColumn('number', 'Your Values', 'col_id');
data.removeColumn(1);
options.legend = {position: 'right'};
}
data.addRow([x,y]);
chart.draw(data,options);
}
于 2012-06-07T18:32:32.370 に答える
12
この問題のさらに優れた解決策は、以下に示すように、データ列の代わりに注釈列を使用することです。このソリューションでは、列を削除または非表示にするために setTimeout またはカスタム関数を使用する必要はありません。以下のコードをGoogle Code Playgroundに貼り付けて試してみてください。
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['', { role: 'annotation' }],
['', '']
]);
var ac = new google.visualization.ColumnChart(document.getElementById('visualization'));
ac.draw(data, {
title : 'Just a title...',
width: 600,
height: 400
});
}
</p>
于 2013-12-12T08:21:04.190 に答える