0

我正在研究数据可视化，并希望显示美国每个州的平均工资和估计人口。现在我在这部分使用谷歌地理图表，我几乎完成了工作。

但我发现谷歌地理图表不支持包含超过 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 列它工作正常，它显示了这一点。 在此处输入图像描述

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

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

我怎么解决这个问题 ？

4

1 回答 1

1

以下是您查询的一些解决方案

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

你需要定义

tooltip: { isHtml: true, trigger: "visible" } 在选项中

接着

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

在您的数据参数中。

希望它会有所帮助

于 2020-05-01T06:32:49.553 回答