在谷歌GeoChart中使用3列以上的数据,可以通过以下步骤实现:
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'GDP');
data.addRow(['China', 1439323776, 1434293]);
data.addRow(['India', 1380004385, 2957989]);
data.addRow(['United States', 331002651, 21439453]);
var options = {
title: 'Population and GDP by Country',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
<div id="chart_div" style="width: 100%; height: 500px;"></div>
完整的示例代码如下:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['geochart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Country');
data.addColumn('number', 'Population');
data.addColumn('number', 'GDP');
data.addRow(['China', 1439323776, 1434293]);
data.addRow(['India', 1380004385, 2957989]);
data.addRow(['United States', 331002651, 21439453]);
var options = {
title: 'Population and GDP by Country',
colorAxis: {colors: ['green', 'blue']}
};
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
这样,你就可以在谷歌GeoChart中使用3列以上的数据来绘制地图了。根据你的需求,可以根据实际情况调整数据和选项对象的配置。
领取专属 10元无门槛券
手把手带您无忧上云