ruby on rails - Chartkick使用库选项时,饼图不显示百分比




ruby-on-rails charts (2)

我遇到了类似的问题。 所以Chart.bundle不提供饼图的选项

而不是你可以使用这里的文档中指定的谷歌图表

所以你必须做的是从application.js中删除//= require Chart.bundle

转到application.html.erb或您用于显示视图的布局，以及<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>或类似的加载js的布局libs添加<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %> 。 它看起来像这样： 

<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

还有！ 另外我注意到你在你的代码中缺少一个“]”。 修复你可以用这个运行图表： 

<%= pie_chart [["Soccer", @soccer_total], ["Basketball",  @basketball_total], ["Baseball",  @baseball_total], ["Other", @other_total ]] %>

您应该能够看到百分比而不添加任何选项

如果你想自定义图表选项，那么你可以在这里看到文档

编辑：你的application.js应该看起来像这样 

//= require jquery
//= require jquery_ujs
//= require chartkick
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

而你的application.html.erb or the layout that you are using at your controller like这样（在最后你不需要它，删除那个highcharts.js include_tag）： 

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>

在我的ROR中，我想将百分比添加到我的Piechart，我使用chartkick gem来呈现饼图。 我已经尝试了各种方法来解决这个问题，但似乎没有任何工作。 我也搜索了一下堆栈溢出看类似的帖子。

这是我想出来的，但没有显示％。 

 <%= pie_chart [["Soccer", @soccer_total], ["Basketball",  @basketball_total, ["Baseball",  @baseball_total], ["Other", @other_total ]], library: {legend: {labelFormat: '{name} : {y} ({percentage}%)'}} %>

我也尝试过这种方法，但仍然没有运气 

<%= pie_chart [["Soccer", @soccer_total], ["Basketball",  @basketball_total, ["Baseball",  @baseball_total], ["Other", @other_total ]], library: {pieSliceText: 'value-and-percentage'} %>

请有更有经验的人帮助我吗？

为OSCAR的答复提供补充

我遵循了奥斯卡提供的答案，但仍未显示％。

这是如何在application.html.erb的<head>看起来： 

  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag "path/to/highcharts.js", "chartkick" %>

和appplication.js是这样的： 

//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .

嘿你可以在这里找到更好的东西

按照我的意见，你可以试试这个代码。 而不是这个 

<%= pie_chart [["Soccer", @soccer_total], ["Basketball",  @basketball_total, ["Baseball",  @baseball_total], ["Other", @other_total ]], library: {pieSliceText: 'value-and-percentage'} %>

你可以试试这个 

<%= pie_chart [["Soccer", @soccer_total], ["Basketball",  @basketball_total, ["Baseball",  @baseball_total], ["Other", @other_total ]], library: {pieSliceText: 'value'} %>

嘿，你可以puth下面的代码在你的头。 

<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.bundle.min.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js</script>
<script> https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js</script>



ruby-on-rails   ruby   charts   chartkick  


chartkick