Google Chart API:Geo Charts边界颜色 [英] Google Chart API: Geo Charts boundary colour
问题描述
我正在使用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边界颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!