Question

我想要做的只是在react-google-charts中使用GeoChart显示一个简单的地图。此代码似乎是正确的，但是当我运行此代码时，会显示一条错误消息：

数据表不兼容：错误：表包含的列数超出预期（预期2列）

此外，当我将数据表设置为只有一行（已注释掉）时，它可以正常工作。但它也没有在地图上显示任何数据。我不知道如何将GeoChart与React一起使用。有谁可以告诉我一个正确的用法？

这是我的代码：

import React, { Component } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import { Questions } from '../../api/questions.js';
import ReactDOM from 'react-dom';
import { Chart } from 'react-google-charts';

export default class MapContainer extends React.Component{
  render(){

        var options = {
          displayMode: 'text'
        };

        var data = [[
          ['Germany',202],
          ['France', 600],
          ['Russia', 700],
        ]];
/*
        var data = [[
          ['Russia', 700],
        ]];
*/
        var columns = [{
              'type': 'string',
              'label' : 'Country'
        },
        {
              'type' : 'number',
              'label' : 'Number'
        }];

    return(
      <div className="mapcontainer">
        <Chart chartType="GeoChart"
                   width={"900px"}
                   height={"500px"}
                   data={data}
                   columns={columns}
                   options={options}
                   graph_id="GeoChart"
                   legend_toggle={true}/>
      </div>
    );
  }
}

Answer 1

data包含在一个额外的数组[]

中

这......

    var data = [[
      ['Germany',202],
      ['France', 600],
      ['Russia', 700],
    ]];

应该是......

    var data = [
      ['Germany',202],
      ['France', 600],
      ['Russia', 700],
    ];

使用react-google-chart的GeoChart不起作用

1 个答案: