Tôi hiểu cách sử dụng GeoChart để hiển thị dữ liệu liên tục (tức là tính khí).Cách sử dụng các màu riêng biệt với Google GeoChart
Nhưng làm cách nào bạn có thể định cấu hình để hiển thị các tập dữ liệu riêng biệt (các trạng thái là cộng hòa, dân chủ, độc lập)? Điều này có thể không?
Cảm ơn!
Tại thời điểm này, bạn không thể sử dụng GeoChart theo cách này. Để thực hiện điều này tôi đã kết thúc bằng cách sử dụng một bản đồ svg, và thay đổi điền thông qua css.
Một hướng dẫn tốt có thể được tìm thấy ở đây: http://blog.visual.ly/how-to-make-choropleth-maps-in-d3/
Bạn đã thử một cái gì đó như thế này?
data.addColumn('string', 'State');
data.addColumn('number', 'Votes (%)');
data.addColumn('string', 'Winner');
data.addRows([['Alabama', 56, 'Republicans'],['Maine', 61, 'Democrats']]);
Bạn cũng có thể giải quyết điều này bằng cách xoa bóp dữ liệu một chút và sử dụng các giá trị được định dạng cho nhãn của bạn. Bạn sẽ có thể dán đoạn mã sau vào here để xem một ví dụ:
function drawVisualization() {
var geoData= new google.visualization.DataTable();
geoData.addRows(2);
geoData.addColumn('string', 'State');
geoData.addColumn('number', 'Votes (%)');
geoData.setValue(0, 0, 'Alabama');
geoData.setValue(0, 1, 0);
geoData.setFormattedValue(0, 1, '56%');
geoData.setValue(1, 0, 'Maine');
geoData.setValue(1, 1, 1);
geoData.setFormattedValue(1, 1, '64%');
var options = {};
options['region'] = 'US';
options['resolution'] = 'provinces';
options['colorAxis'] = { minValue : 0, maxValue : 1, colors : ['#FF0000','#0000FF']};
options['backgroundColor'] = '#FFFFFF';
options['datalessRegionColor'] = '#E5E5E5';
options['width'] = 556;
options['height'] = 347;
options['legend'] = 'none';
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(geoData, options);
}
này bây giờ có thể được thực hiện bằng cách chuyển đổi phân loại của bạn để số thay vì tên đảng. Ví dụ:
democrats = 0
independents = 1
republicans = 2
Tiếp bao gồm một màu cho mỗi bên trong màu mảng colorAxis:
var options = {
colorAxis: {
colors: ['blue','green','red']
...
}
}
Các mã sau sẽ hiển thị trạng thái dân chủ như màu xanh, cộng hòa như màu đỏ và độc lập như màu xanh lá cây (các dữ liệu là tạo thành, tôi không mà các tiểu bang thích bên nào).
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["geochart"]});
google.setOnLoadCallback(drawRegionsMap);
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['State', 'Party'],
['US-NY', 0],
['US-AB', 2],
['US-TX', 2],
['US-CA', 0],
['US-AK', 2],
['US-MI', 1]
]);
var options = {
displayMode: 'regions',
resolution:'provinces',
colorAxis:{
colors:['blue','green','red'],
minValue: 0,
maxValue:2},
region:'US',
legend:'none'
};
var chart = new google.visualization.GeoChart(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
Miễn là màu bạn liệt kê trong màuAxis khớp với số lượng và thứ tự phân loại bạn sử dụng cho các trạng thái, bạn có thể kiểm soát màu của trạng thái.
