简体   繁体   English

Google Chart API:地理图表边界颜色

[英]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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM