1

我正在尝试将一些数据从谷歌趋势传递到谷歌图表,但我得到了Incompatible data table: Error: Table contains more columns than expected (Expecting 2 columns)错误

我只是假设它会自动从我将其查询到图表中而不是出错。我遇到错误的代码是:

google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
var findTitle = $(".input-wrapper input").val();
function drawChart() {
  console.log(findTitle);
  var query = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=GEO_MAP_0_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m');
  query.send(function (response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
      return;
    }
    data = response.getDataTable();
    var view = new google.visualization.DataView(data);
    view.setColumns([{
      calc: function (data, row) {
        return data.getFormattedValue(row, 0);
      },
      type: 'string',
      label: data.getColumnLabel(0)
    }, 1]);
    var chart = new google.visualization.GeoChart(document.getElementById('chart_region_top'));
    chart.draw(view, {
      chartArea: {
        height: '80%',
        width: '100%'
      },
    });
    chart.draw(data, {
        width: 1000,
        height: 500,
        title: 'Tag: Battlefield 1',
        colors: ['#ff0000'],
        backgroundColor: '#2D2D2D',
        legendTextStyle: { color: '#FFF', position: 'bottom' },
        titleTextStyle: { color: '#FFF' },
        hAxis: {
          textStyle: {color: '#FFF'},
          gridlines: {color: '#FFF'}
        },
        vAxis: {
          textStyle: {color: '#FFF'},
          gridlines: {color: '#FFF'}
        }
    });
  });
}

非常感谢我为什么会收到此错误和解决方案的任何帮助:)

4

1 回答 1

0

由于 GeoChart 需要两列,因此请
使用 DataView 从 DataTable 中提取前两列

另外,需要加载'geochart'包,请参阅以下工作片段...

google.charts.load('current', {
  callback: drawChart,
  packages: ['geochart']
});

function drawChart() {
  var query = new google.visualization.Query('https://www.google.com/trends/fetchComponent?hl=en-US&q=battlefield%201&cid=GEO_MAP_0_0&export=3&w=500&h=300&gprop=youtube&date=today%201-m');
  query.send(function (response) {
    if (response.isError()) {
      alert('Error in query: ' + response.getMessage() + ' - ' + response.getDetailedMessage());
      return;
    }

    var view = new google.visualization.DataView(response.getDataTable());
    view.setColumns([0, 1]);

    var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
    chart.draw(view, {
      legend: 'none'
    });
  });
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

于 2016-10-27T12:36:09.230 回答