Question

在我的ROR中，我想将百分比添加到我的饼图中，我使用chartkick gem来渲染饼图。我已经尝试了各种方法解决这个问题，但似乎没有办法。我也用Google搜索并查看堆栈溢出时的类似帖子。

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

 <%= 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'} %>

请有经验的人帮助我吗？

为奥斯卡增加答案

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

<head>中的application.html.erb看起来如何：

  <%= 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 .

Answer 1

嘿你可以找到更好的东西here

根据我的观点，您可以尝试使用此代码。而不是这个

<%= 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'} %>

嘿，你可以在标题下面的代码下面。

<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>

Answer 2

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

而不是您可以使用文档here

中指定的Google图表

所以你需要做的是从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' %>

还有！我也注意到你错过了一个＆＃34;]＆＃34;在你的代码。修复您可以使用以下方式运行图表：

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

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

如果您想自定义图表选项，则可以查看文档here

编辑：你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 %>

Answer 3

我是这样做的

1）如https://github.com/ankane/chartkick中所述，我将Chartkick配置为使用Highcharts。

2）我在饼图中使用了以下库选项：

library: {plotOptions: {pie: {dataLabels: {format: "<b>{point.name}</b>: {point.y} ({point.percentage:.1f}%)"}}}}

Answer 4

ChartKick现在支持该功能。
您可以使用

<%= pie_chart data, suffix: "%" %>

Chartkick饼图在使用库选项时未显示百分比

4 个答案: