Graphique Google: Créer des colonnes d'affichage dynamique des données

Question

L'utilisation de google chart permet de définir une vue de données. Je dois créer une vue de données basée sur des colonnes.

actuellement i ont deux fonctions pour créer des colonnes de données pour 4 et 2. Comment puis-je combiner ces deux fonctions et comment puis-je créer une fonction dynamique créer vue des données

var dataView = new google.visualization.DataView(chartData); 
setDataViewMultipleChart(dataView); 



function setDataViewMultiple(dataView) { 
       dataView.setColumns([0, 1, { 
       calc: function(dt, row) { 
       return getTooltip(dt, row, 1); 
       }, 
       role: 'tooltip', 
       type: 'string', 
       p: { 
       html: true 
       } 
       }, 2, { 
       calc: function(dt, row,) { 
       return getTooltip(dt, row, 2); 
       }, 
       role: 'tooltip', 
       type: 'string', 
       p: { 
       html: true 
       } 
       }, 3, { 
       calc: function(dt, row) { 
       return getTooltip(dt, row, 1); 
       }, 
       role: 'tooltip', 
       type: 'string', 
       p: { 
       html: true 
       } 
       }, 4, { 
       calc: function(dt, row) { 
       return getTooltip(dt, row, 2); 
       }, 
       role: 'tooltip', 
       type: 'string', 
       p: { 
       html: true 
       } 
       }]); 
     } 



     function setDataViewSingleChart(dataView) { 
       dataView.setColumns([0, 1, { 
       calc: function(dt, row) { 
       return getTooltip(dt, row, 1); 
       }, 
       role: 'tooltip', 
       type: 'string', 
       p: { 
       html: true 
       } 
       }, 2, { 
       calc: function(dt, row,) { 
       return getTooltip(dt, row, 2); 
       }, 
       role: 'tooltip', 
       type: 'string', 
       p: { 
       html: true 
       } 

       }]); 
     } 

Answer 1

juste besoin de construire un matrice de la colonne définitions

puisque les colonnes calculées sont des objets avec des fonctions (calc),
ceux-ci doivent être créées à l'intérieur d'une fermeture (fonction)

voir ci-dessous fragment de travail ...

passe une table de données à la fonction getDataView
qui va créer une colonne de vue pour chaque colonne dans la table de données
et une colonne d'info-bulle pour chaque colonne ordonnée

google.charts.load('current', { 
 
    packages: ['corechart'] 
 
}).then(function() { 
 
    var data = google.visualization.arrayToDataTable([ 
 
    ['Year', 'Sales', 'Expenses', 'Profit'], 
 
    ['2014', 1000, 400, 200], 
 
    ['2015', 1170, 460, 250], 
 
    ['2016', 660, 1120, 300], 
 
    ['2017', 1030, 540, 350] 
 
    ]); 
 

 
    var view = getDataView(data); 
 
    var chart = new google.visualization.LineChart(document.querySelector('#chart_div')); 
 
    chart.draw(view.toDataTable(), { 
 
    tooltip: { 
 
     isHtml: true 
 
    } 
 
    }); 
 

 
    function getDataView(dataTable) { 
 
    var dataView; 
 
    var viewColumns = []; 
 

 
    for (var i = 0; i < dataTable.getNumberOfColumns(); i++) { 
 
     addViewColumn(i); 
 
    } 
 

 
    function addViewColumn(index) { 
 
     viewColumns.push(index); 
 
     if (index > 0) { 
 
     viewColumns.push({ 
 
      calc: function (dt, row) { 
 
      return getTooltip(dt, row, index); 
 
      }, 
 
      role: 'tooltip', 
 
      type: 'string', 
 
      p: { 
 
      html: true 
 
      } 
 
     }); 
 
     } 
 
    } 
 

 
    dataView = new google.visualization.DataView(dataTable); 
 
    dataView.setColumns(viewColumns); 
 
    return dataView; 
 
    } 
 

 
    function getTooltip(dt, row, col) { 
 
    var tooltip = '<div class="tooltip">'; 
 
    tooltip += '<div>' + dt.getFormattedValue(row, 0) + '</div>'; 
 
    tooltip += '<div>' + dt.getColumnLabel(col) + '</div>'; 
 
    tooltip += '<div>' + dt.getFormattedValue(row, col) + '</div>'; 
 
    tooltip += '</div>'; 
 
    return tooltip; 
 
    } 
 
});

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