Comment afficher un Vide Google Chart quand il n'y a pas de données?

À dessiner un histogramme et je n'ai pas toutes les données de la source de données, Comment pouvons-nous tracer un graphique vide au lieu de se montrer d'une couleur rouge par défaut, le message "le Tableau n'a pas de colonnes"?

InformationsquelleAutor Vamshi Vangapally | 2012-06-07
  1. 15

    Ce que j'ai à faire est d'initialiser mon tableau avec 1 colonne et 1 point de données (à 0). Alors à chaque fois que des données est ajouté-je vérifier si il est à seulement 1 colonne et qu'il est le mannequin de la colonne, puis-je le supprimer. J'ai aussi masquer la légende pour commencer, de sorte qu'il n'apparaisse pas avec le mannequin de la colonne, puis-je l'ajouter lors de la nouvelle colonne est ajoutée.

    Voici un exemple de code que vous pouvez brancher à la Google Visualisation De L'Aire De Jeux qui fait ce que je suis en train de parler. Vous devriez voir le diagramme 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);
}​
    InformationsquelleAutor Matt Dodge
  2. 12

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

    InformationsquelleAutor AntonSjoberg
  3. 0

    Le chemin que j'ai fait c'était en désactivant les morceaux de tarte, de désactiver les info-bulles, la farce dans un semblant de valeur et de prise de gris. Je suis sûr qu'il y a de plus intelligent façons de le faire, mais cela a fonctionné pour moi, là où les autres méthodes n'ont pas.

    Le seul inconvénient est qu'il présente à la fois des éléments de la légende et de 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 seulement. 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 } );
}
    InformationsquelleAutor woot