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

Question

關於在折線圖和柱形圖之間進行切換，存在類似的問題（ Google圖表：在折線圖和柱形圖之間切換），但似乎不適用於表格。

我有一個折線圖，我想換成表格然后再折回...我看到這種情況的唯一方法是通過重新聲明一個類似於...的表格...

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 ， 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" />