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