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>




chartkick