Question

我正在渲染一个包含以下内容的geochart：

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

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

这很有用，但地图上用来指定每个国家/地区的计数的文字是“价值”。

我正在使用Google Charts API执行此操作，并查看他们的文档，他们可以使用＆＃39; Popularity＆＃39;而不是＆＃39;价值＆＃39;通过这样做：

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

我试图通过将其直接添加到geo_chart来复制这一点，并且仍然是“价值”＆＃39;出现了。你可以在下面看到我的尝试：

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

有什么想法吗？

由于

Answer 1

我检查了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>

如何更改文字＆＃39;价值＆＃39;在Chartkick的geochart中

1 个答案: