1

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'}
        }
    });
  });
}

なぜこのエラーが発生するのか、解決策を教えていただければ幸いです:)

4

1 に答える 1

0

GeoChart は 2 つの列を想定している
ため、DataView を使用して DataTable から最初の 2 つの列を抽出します。

'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 に答える