问题描述
我正在使用Google API中的GEO图表。
我需要知道国家/地区边界的颜色是否可以更改吗?这可以帮助我根据为图表选择的填充颜色更好地区分国家/地区。
I am using a GEO chart from the google API.I needed to know if the colour of the country boundaries can be changed or not?, which might help me distinguish the countries better depending on the fill colour i selected for the graph.
推荐答案
没有用于更改边框颜色的配置选项,
,但是您可以手动更改图表的'
事件。
there are no config options for changing the border color,
but you can change manually, on the chart's 'ready'
event.
每个国家/地区都将使用< path>
元素绘制。
每个
< path>
元素将具有描边
属性,
是边框颜色。
each country will be drawn with a <path>
element.
each <path>
element will have a stroke
attribute,
which is the border color.
var countries = container.getElementsByTagName('path');
Array.prototype.forEach.call(countries, function(path) {
path.setAttribute('stroke', 'red');
});
请参阅以下工作摘要...
see following working snippet...
google.charts.load('current', {
packages: ['geochart'],
mapsApiKey: 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
}).then(function () {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var container = document.getElementById('chart_div');
var chart = new google.visualization.GeoChart(container);
google.visualization.events.addListener(chart, 'ready', function () {
var countries = container.getElementsByTagName('path');
Array.prototype.forEach.call(countries, function(path) {
path.setAttribute('stroke', 'red');
});
});
chart.draw(data, {
legend: 'none'
});
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
这篇关于Google Chart API:Geo Charts边界颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!