本文介绍了Google Chart API:Geo Charts边界颜色的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在使用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边界颜色的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-18 22:47
查看更多