如何在Google GeoChart中使用3个以上的列数据

Question

我正在进行数据可视化，并希望显示美国每个州的平均工资和估计人口。现在，我正在将google geochart用于这部分，并且几乎完成了工作。

但是我发现Google地理图表不支持包含超过3列的数据。以下是我的工作及其运行时的外观。

function drawNewChart(){
    google.charts.load('current', {
        'packages':['geochart'],
        // Note: you will need to get a mapsApiKey for your project.
        // See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
        'mapsApiKey': 'my key'
      });


    google.charts.setOnLoadCallback(function(){
        let map_data = [['State', 'Count', 'AvgWages']]
        Object.getOwnPropertyNames(stateData).forEach(function(item, index){
            map_data.push(['US-' + item, stateData[item].count, stateData[item].AvgWages / stateData[item].count])
        })

        console.log('full data', map_data)

        var data = google.visualization.arrayToDataTable(map_data);

        var options = {
          region: "US",
           resolution: "provinces"
        };

        var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

        chart.draw(data, options);
    });
}

具有3列，它工作正常，并且显示了这一点。

但是我想再增加一列。 （估计人口）。当我添加它时，它显示此错误消息：

不兼容的数据表：错误：表包含的列比预期多（预期3列）

我该如何解决这个问题？

Answer 1

以下是您的查询的几种解决方案

https://codesandbox.io/s/xjqrk659zw?file=/src/index.js:847-892

您需要定义

tooltip：{isHtml：true，触发器：“ visible”}在选项中

然后

{角色：“工具提示”，键入：“字符串”，p：{html：true}}

在您的数据参数中。

希望它会有所帮助