javascript 如何在 Google GeoChart 中使用不同的颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9386062/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use distinct colors with Google GeoChart
提问by Jonathan
I understand how to use the GeoChart to display a data that is in a continuum (i.e. temperture).
我了解如何使用 GeoChart 显示连续体（即温度）中的数据。
But how can you configure it to display distinct data sets (states that are republican, democratic, independent)? Is this possible?
但是如何配置它以显示不同的数据集（共和、民主、独立的州）？这可能吗？
Thanks!
谢谢！
采纳答案by Jonathan
At this time it is not possible to use GeoChart in this way. To accomplish this I ended up using a svg map, and changing the fill via css.
目前无法以这种方式使用 GeoChart。为了实现这一点，我最终使用了 svg 地图，并通过 css 更改了填充。
A good tutorial can be found here: http://blog.visual.ly/how-to-make-choropleth-maps-in-d3/
一个很好的教程可以在这里找到：http: //blog.visual.ly/how-to-make-choropleth-maps-in-d3/
回答by Scott
You can also solve this by massaging the data a bit and using formatted values for your labels. You should be able to paste the following code into hereto see an example:
您还可以通过稍微调整数据并为标签使用格式化值来解决此问题。您应该能够将以下代码粘贴到此处以查看示例：
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);
}
?
?
回答by AWaddington
This can now be accomplished by converting your classifications to numbers instead of party names. For example:
这现在可以通过将您的分类转换为数字而不是派对名称来完成。例如：
democrats = 0
independents = 1
republicans = 2
Next include a color for each party in the colorAxis colors array:
接下来在 colorAxis 颜色数组中为每一方添加一个颜色：
var options = {
colorAxis: {
colors: ['blue','green','red']
...
}
}
The following code displays democratic states as blue, republicans as red and independents as green (the data is made up, I don't which states prefer which party).
以下代码显示民主国家为蓝色，共和党为红色，独立人士为绿色（数据是编造的，我不知道哪个州更喜欢哪个政党）。
<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>
As long as the colors you list in the colorAxis match the number and order of classifications you use for the states, you can control the color of the state.
只要您在 colorAxis 中列出的颜色与您用于状态的分类数量和顺序相匹配，您就可以控制状态的颜色。
回答by dokaspar
Have you tried something like this?
你有没有尝试过这样的事情？
data.addColumn('string', 'State');
data.addColumn('number', 'Votes (%)');
data.addColumn('string', 'Winner');
data.addRows([['Alabama', 56, 'Republicans'],['Maine', 61, 'Democrats']]);
