Comment afficher un graphique Google vide quand il n'y a pas de données?
envisagez de dessiner un graphique de colonne et je ne reçois aucune donnée de la source de données, Comment faire pour dessiner un graphique vide au lieu de montrer un message rouge coloré par défaut disant "Table n'a pas de colonnes". Toute aide appréciée. Merci à l'avance!
3 réponses
ce que je fais est d'initialiser mon graphique avec 1 colonne et 1 point de données (mis à 0). Ensuite, chaque fois que des données sont ajoutées, je vérifie s'il n'y a qu'une colonne et que c'est la colonne factice, puis je la supprime. Je cache aussi la légende pour commencer afin qu'elle n'apparaisse pas avec la colonne factice, puis je l'ajoute Quand la nouvelle colonne est ajoutée.
Voici un exemple de code que vous pouvez brancher à l' Google Visualisation De L'Aire De Jeux qu'est ce que je suis en train de parler. Vous devriez voir la graphique vide pendant 2 secondes, puis les données sont ajoutés et les colonnes apparaît.
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);
}
Une bien meilleure solution pour ce problème pourrait être d'utiliser une annotation colonne au lieu d'une colonne de données comme indiqué ci-dessous. Avec cette solution, vous n'avez pas besoin d'utiliser setTimeout ou fonction personnalisée pour supprimer ou de masquer la colonne. Essayez-le en collant le code ci-dessous dans Google Code Aire De Jeux.
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
});
}
la façon dont j'ai fait ça a été en désactivant les tranches de tarte, en désactivant les tooltips, en empiffrant une valeur fictive et en la rendant grise. Je suis sûr qu'il y a des façons plus intelligentes de le faire, mais cela a fonctionné pour moi là où les autres méthodes ne l'ont pas fait.
Le seul inconvénient est qu'il place les deux éléments dans la légende à gris ainsi. Je pense que vous pourriez peut-être juste ajouter un troisième élément, et de le rendre invisible sur la légende. J'ai aimé cette manière.
function drawChart() {
// Define the chart to be drawn.
data = new google.visualization.DataTable();
data.addColumn({type: 'string', label: 'Result'});
data.addColumn({type: 'number', label: 'Count'});
data.addRows([
['Value A', 0],
['Value B', 0]
]);
var opt_pieslicetext = null;
var opt_tooltip_trigger = null;
var opt_color = null;
if (data.getValue(1,1) == 0 && data.getValue(0,1) == 0) {
opt_pieslicetext='none';
opt_tooltip_trigger='none'
data.setCell(1,1,.1);
opt_color= ['#D3D3D3'];
}
chart = new google.visualization.PieChart(document.getElementById('mydiv'));
chart.draw(data, {sliceVisibilityThreshold:0, pieSliceText: opt_pieslicetext, tooltip: { trigger: opt_tooltip_trigger }, colors: opt_color } );
}