Question

我试图将Google趋势中的一些数据传递到Google图表，但我收到了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'}
        }
    });
  });
}

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

Answer 1

因为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>

将Google趋势视觉查询转换为Google GEOchart

1 个答案: