1

我正在使用以下内容渲染地理图表：

<%= javascript_include_tag "//www.google.com/jsapi", "chartkick" %>

<%= geo_chart Company.group(:country).count, colors: ["#33C1FF", "#008ED6"] %>

这很好用，但地图上用于指定每个国家/地区计数的文本是“值”。

我正在使用 Google Charts API 来执行此操作，并查看他们的文档，他们可以通过执行以下操作来使用“人气”而不是“价值”：

var data = google.visualization.arrayToDataTable([
      ['Country', 'Popularity'],
      ['Germany', 200],
      ['United States', 300],
      ['Brazil', 400],
      ['Canada', 500],
      ['France', 600],
      ['RU', 700]
    ]);

我试图通过将其直接添加到 geo_chart 来复制它，但仍然出现“值”。你可以在下面看到我的尝试：

<%= geo_chart [['Popularity'], ['Germany', 200], ['United States', 300], ['Brazil', 400], ['Canada', 500], ['France', 600], ['RU', 700]], colors: ["#33C1FF", "#008ED6"] %>

有任何想法吗？

谢谢

4

1 回答 1

0

我检查了 Chartkick 上的代码，看起来这个值是固定的。因此，我直接使用了 Google Geomap，并且能够根据需要进行自定义。下面是我的代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["geomap"]});
  google.setOnLoadCallback(drawMap);

  function drawMap() {
    var data = google.visualization.arrayToDataTable([
      ['Country', 'Data Feeds'],
      <% Company.country_count.each do |key, value| %>
      ['<%= Company.country_name("#{key}") %>', <%= value%>],
      <% end %>
    ]);

    var options = {
      colorAxis: {colors: ['#33C1FF', '#008ED6']},
      backgroundColor: '#FFFFFF',
      datalessRegionColor: '#F5F5F5',
      defaultColor: '#f5f5f5',
      legend: 'none',
    };

    var chart = new google.visualization.GeoChart(document.getElementById('datafeeds_geomap'));
    chart.draw(data, options);

  };
</script>

<div id="datafeeds_geomap" style="height: 300px; text-align: center; color: #999; line-height: 300px; font-size: 14px; font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif;">Loading...</div>
于 2015-06-18T18:40:10.623 回答