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

发布时间：2020-12-16 19:07:05 所属栏目：百科来源：网络整理

导读：在我的ROR中,我想将百分比添加到我的饼图中,我使用chartkick gem来渲染饼图.我已经尝试了各种方法解决这个问题,但似乎都没有.我也搜索过,看看堆栈溢出时的类似帖子. 这就是我想出来的,但它没有显示％. %= pie_chart [["Soccer",@soccer_total],["Basketball"

在我的ROR中,我想将百分比添加到我的饼图中,我使用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",library: {pieSliceText: 'value-and-percentage'} %>

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

更新奥斯卡的答案

我按照奥斯卡答案提供的指示,但仍未显示％.

这与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 .

解决方法

我遇到了类似的问题.因此Chart.bundle不提供饼图的选项

您可以使用文档here中指定的Google Charts代替

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

转到application.html.erb或您用于显示视图的布局,然后在<％= javascript_include_tag'application','data-turbolinks-track'：'reload'％>之前或类似的东西你加载js libs add<％= 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",@basketball_total],@other_total ]] %>

您应该能够在不添加任何选项的情况下查看百分比

如果要自定义图表选项,则可以查看文档here

编辑：你application.js应该是这样的

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

你的application.html.erb或你在控制器上使用的布局是这样的(在最后你不需要它删除highcharts.js include_tag)：

<%= stylesheet_link_tag    'application','data-turbolinks-track' => true %>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!