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

Google Charts - 在表格和图表视图之间切换

1 个答案: