web-dev-qa-db-fra.com

Erreur de l'API Google Chart "Toutes les séries sur un axe donné doivent être du même type de données"

enter image description here

J'ai LineGraph utilisant googlechart. Ce graphique est créé avec le code suivant

function drawChart() {
    var data = google.visualization.arrayToDataTable([ 

      ['Categegories', 'R1' , 'R2' , 'R3' , 'R4' , 'R5' , 'R6' ],

      ['A',          1,     4,       2,    4,       1,  null],

      ['D',          3,  null,    null,    7,    null,     1],

      ['G',          null,  null,    null,       8,    null,  null],

    ]);

    var options = {
      title: 'Graph',
      pointSize: 6,
      vAxis: {minValue:0, maxValue:10,gridlines:{count:6}},
    };

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
  }

Maintenant, étonnamment, si je supprime une ligne de données ['D', 3, null, null, 7, null, 1],

Il produit une erreur indiquant que All series on a given axis must be of the same data type

J'ai réduit mon code à une seule ligne et j'ai trouvé qu'il y avait un problème avec les valeurs de null

par exemple.

['Category', 'R1' , 'R2' , 'R3' ],
['A',       2,  1,  1]

Il génère le graphique alors que si j'ajoute une valeur de null n'importe où dans les données, c'est-à-dire à la place de (2,1,1), cela ne fait pas ..

En attente de conseils d'experts sur la définition d'une option pour la gestion des valeurs null ... Il est très étrange que certaines valeurs nulles fonctionnent et d'autres non .. :(

charts
28
Shahid

Enfin, j'ai une solution à mon problème. J'espère que cela aidera beaucoup d'autres comme moi. Le problème est essentiellement une limitation de la méthode arrayToDataTable. La ligne de données doit avoir le type correct dans toutes les colonnes. Étant donné que nous avons des valeurs nulles dans les lignes, l'API suppose que le type de données de cette colonne est nulle ou génère une erreur de non-obtention d'un type de données valide. Pour résoudre ce problème, vous devrez passer au constructeur DataTable standard

var data = new google.visualization.DataTable();
data.addColumn('string', 'Year');
data.addColumn('number', 'Health (P)');
data.addColumn('number', 'Health (A)');
data.addColumn('number', 'Gender (P)');
data.addColumn('number', 'Gender (A)');
data.addColumn('number', 'Education (P)');
data.addColumn('number', 'Education (A)');
data.addColumn('number', 'Agriculture (P)');
data.addColumn('number', 'Agriculture (A)');
data.addColumn('number', 'Social protection (P)');
data.addColumn('number', 'Social protection (A)');
data.addColumn('number', 'Environment (P)');
data.addColumn('number', 'Environment (A)');
data.addColumn('number', 'Water/sanitation (P)');
data.addColumn('number', 'Water/sanitation (A)');
data.addRows([

    ['2008',81.06,null,1.32,null,94.68,0,13.41,null,30.36,null,19.78,null,36.87,null],
    ['2009',27.13,null,22.34,null,33.6,null,79.92,null,1.34,null,89.77,0,15.68,null],
    ['2010',104.89,0,14.61,null,33.46,null,30.29,null,22.28,null,107.81,null,1.39,null],
    ['2011',55,0,110.69,null,1.3,null,106.24,0,14.45,null,27.34,null,30.71,null],
    ['2012',29.96,null,27.88,null,44.77,null,133.83,null,1.31,null,105.01,null,17.83,null],
    ['2013',0,null,0,null,0,null,0,null,0,null,0,null,0,null]
]);

Copié à partir du lien suivant https://groups.google.com/forum/?fromgroups=#!topic/google-visualization-api/2Jafk8PyjV4

Alternativement, avec arrayToDataTable (), vous pouvez spécifier le type dans la ligne d'en-tête. Consultez les documents pour en savoir plus https://developers.google.com/chart/interactive/docs/datatables_dataviews#arraytodatatable

var data = google.visualization.arrayToDataTable([
      ['Categegories', {label: 'R1', type: 'number'} , {label: 'R2', type: 'number'} , {label: 'R3', type: 'number'} , {label: 'R4', type: 'number'} , {label: 'R5', type: 'number'} , {label: 'R6', type: 'number'} ],

      ['A',          1,     4,       2,    4,       1,  null],

      ['D',          3,  null,    null,    7,    null,     1],

      ['G',          null,  null,    null,       8,    null,  null],

    ]);
48
Shahid

Pour moi, cette erreur a été causée par le fait d'avoir une colonne supplémentaire à laquelle aucune valeur n'a été ajoutée

3
Alicia

Je pense que spécifier le type dans la ligne d'en-tête résoudra le problème.

var data = google.visualization.arrayToDataTable([
['Category', {label: 'Return', type: 'number'}, {label: 'Risk', type: `enter code here`'number'}],
[1.5,  20, 50]
]);
3
Athira Ramachandran

J'ai eu cette erreur en créant un graphique à barres qui avait deux colonnes avec des chaînes et une avec des nombres. J'avais l'intention d'afficher une vue qui gardait la deuxième colonne de chaîne cachée mais oubliée.

1
Noumenon