谷歌圖表：創建動態數據視圖列

Question

使用谷歌圖表我試圖設置數據視圖.i必須創建基於列的數據視圖。

目前我有兩個功能，爲4創建數據列和2.如何結合這兩種功能，我怎麼可以創建動態 創建數據視圖

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

功能只需要建立一個列的陣列定義

因爲所計算的列與函數（calc），
這些需要的封閉內要創建的（功能）

對象

見下列工作片斷...

傳遞的數據表到getDataView功能
這將用於在數據表中
每一列和每個Y軸柱的工具提示列創建視圖列

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>