[英]Google Chart API: Geo Charts boundary colour
I am using a GEO chart from the google API.我正在使用来自 google API 的 GEO 图表。 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.但您可以在图表的
'ready'
事件中手动更改。
each country will be drawn with a <path>
element.每个国家/地区都将使用
<path>
元素绘制。
each <path>
element will have a stroke
attribute,每个
<path>
元素都有一个stroke
属性,
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.