Google Charts - 在表格和圖表視圖之間切換

Question

有關於在行和列圖表之間切換的類似問題（Google Charts: Switching between Line and Column charts），但它似乎不適用於表格。

我有，我想更換成表背線圖......我看到這種情況出現是重新聲明類似表的唯一途徑...

function changeIntoTable() { 
    var table = new google.visualization.Table(document.getElementById('dashboard_div')); 
    table.draw(data, {showRowNumber: true, width: '100%', height: '100%'}); 
} 

function changeIntoChart() { 
    // Create a dashboard. 
    var dashboard = new google.visualization.Dashboard(document.getElementById('dashboard_div')); 

    // Create a line chart, passing some options 
    var lineChart = new google.visualization.ChartWrapper({ 
    'chartType': 'LineChart', 
    'containerId': 'chart_div', 
    'options': { 
     backgroundColor: { fill:'transparent' }, 
     'legend': 'right', 
     'pointSize': 5, 
     crosshair: { trigger: 'both' }, // Display crosshairs on focus and selection. 
     hAxis: { 
      title: 'Time' 
     }, 
     vAxis: { 
      title: 'Value' 
     } 
    } 
    }); 

    dashboard.bind(lineChart); 
    dashboard.draw(data); 
} 

所以，我想知道如果有更簡單的解決方案？

Answer 1

你有什麼應該工作正常，但...

你可以利用ChartWrapper Class可以得出任何圖表類型的...

下面是一個例子，點擊該按鈕來切換圖表。 ..

google.charts.load('current', { 
 
    packages: ['corechart', 'table'], 
 
    callback: initChart 
 
}); 
 

 
function initChart() { 
 
    var button; 
 
    var chart; 
 
    var data; 
 
    var showChart = 'Table'; 
 

 
    data = google.visualization.arrayToDataTable([ 
 
    ['Year', 'Sales', 'Expenses'], 
 
    ['2004', 1000,  400], 
 
    ['2005', 1170,  460], 
 
    ['2006', 660,  1120], 
 
    ['2007', 1030,  540] 
 
    ]); 
 

 
    chart = new google.visualization.ChartWrapper({ 
 
    containerId: 'chart_div', 
 
    dataTable: data 
 
    }); 
 

 
    button = document.getElementById('btnSwitch'); 
 
    button.addEventListener('click', switchChart, false); 
 

 
    // draw initial chart 
 
    switchChart(); 
 

 
    function switchChart() { 
 
    button.value = showChart; 
 
    showChart = (showChart === 'Table') ? 'LineChart' : 'Table'; 
 
    drawChart(showChart); 
 
    } 
 

 
    function drawChart(chartType) { 
 
    chart.setChartType(chartType); 
 
    chart.setOptions(getOptions(chartType)); 
 
    chart.draw(); 
 
    } 
 

 
    function getOptions(chartType) { 
 
    var options; 
 

 
    switch (chartType) { 
 
     case 'LineChart': 
 
     options = { 
 
      backgroundColor: { 
 
      fill:'transparent' 
 
      }, 
 
      legend: 'right', 
 
      pointSize: 5, 
 
      crosshair: { 
 
      trigger: 'both' 
 
      }, 
 
      hAxis: { 
 
      title: 'Time' 
 
      }, 
 
      vAxis: { 
 
      title: 'Value' 
 
      } 
 
     }; 
 
     break; 
 

 
     case 'Table': 
 
     options = { 
 
      showRowNumber: true, 
 
      width: '100%', 
 
      height: '100%' 
 
     }; 
 
     break; 
 

 
     default: 
 
     options = {}; 
 
    } 
 

 
    return options; 
 
    } 
 
}

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