Javascript 为所有区域应用相同的颜色谷歌地理图表
有没有一种方法可以将相同的颜色(不褪色)应用于谷歌地图中的所有区域 我尝试为地图移动“范围栏”可能有效,但无效Javascript 为所有区域应用相同的颜色谷歌地理图表,javascript,charts,google-visualization,Javascript,Charts,Google Visualization,有没有一种方法可以将相同的颜色(不褪色)应用于谷歌地图中的所有区域 我尝试为地图移动“范围栏”可能有效,但无效 google.charts.load('upcoming', { callback: drawRegionsMap, packages: ['geochart'] }); function drawRegionsMap() { var data = google.visualization.arrayToDataTable([ ['Country', 'Pop
google.charts.load('upcoming', {
callback: drawRegionsMap,
packages: ['geochart']
});
function drawRegionsMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 400],
['United States', 200],
['Brazil', 200],
['Canada', 200],
['France', 200],
['RU', 200]
]);
var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));
chart.draw(data, {
legend: 'none'
});
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
google.charts.load('coming'{
回调:DrawRegionMap,
包装:[“地球艺术”]
});
函数drawRegionsMap(){
var data=google.visualization.arrayToDataTable([
[‘国家’、‘受欢迎程度’],
[‘德国’,400],
[‘美国’,200],
[‘巴西’,200],
[‘加拿大’,200],
['France',200],
['RU',200]
]);
var chart=new google.visualization.geograpart(document.getElementById('chart_div'));
图表绘制(数据、{
图例:“无”
});
}
谢谢看起来颜色是基于提供的值。如果要更改背景颜色,请尝试设置
backgroundColor
属性
此处信息:根据,数据表中的第二列驱动区域的颜色 一个可选的数字列,用于根据colorAxis.colors属性中指定的比例为该区域指定颜色。如果此列不存在,则所有区域的颜色都相同 因此,您可以删除第二列,也可以对所有行使用相同的值 但是,如果希望悬停每个区域时的工具提示显示不同的值,
我们可以对第二列中的值使用对象表示法 对象表示法允许我们提供值(
v:
)和格式化值(f:
)默认情况下,工具提示将显示格式化的值 因此,要使所有区域显示相同的颜色,
并在工具提示中显示正确的值,
我们为所有行分配相同的值,
但提供实际值作为格式化值
{v: 400, f: '200'}
请参阅以下工作片段
google.charts.load('coming'{
mapsApiKey:‘AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY’,
包装:[“地球艺术”]
}).然后(函数(){
var data=google.visualization.arrayToDataTable([
[‘国家’、‘受欢迎程度’],
[“德国”{v:400,f:'400'}],
[“美国”{v:400,f:'200'}],
[“巴西”{v:400,f:'200'}],
['Canada',{v:400,f:'200'}],
['France',{v:400,f:'200'}],
['RU',{v:400,f'200'}]
]);
var chart=new google.visualization.geograpart(document.getElementById('chart_div'));
图表绘制(数据、{
图例:“无”
});
});代码>