Chartkick餅圖在使用庫選項時未顯示百分比

在我的ROR中，我想將百分比添加到我的餅圖，我使用chartkick寶石來呈現餅圖。我已經嘗試了各種方法解決問題，但似乎沒有任何工作。我也搜索了一下，看着堆棧溢出的類似帖子。Chartkick餅圖在使用庫選項時未顯示百分比

這是我想到的，但它沒有顯示％。

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

可以請更有經驗的人幫助我？

UPADATE奧斯卡的回答

我跟着提供了奧斯卡的答案，但它仍然沒有顯示％的方向。

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

來源

2017-09-07 Slowboy

哎你可以找到更好的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>

來源

2017-09-07 12:22:09

謝謝@Ronak布哈特，但您的解決方案並沒有改變什麼，還是看不到的百分比 – Slowboy

我有一個類似的問題與此工作。所以Chart.bundle不提供用於餅圖選項

取而代之的是，你可以使用谷歌圖表作爲文件規定here

所以，你必須做的是從的application.js

圍棋刪除//= require Chart.bundle到application.html.erb或您用來顯示您的視圖的佈局，以及<%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>或您用於加載js庫的類似內容添加<%= 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 ]] %>

你應該能夠看到百分比不添加任何選項

如果你想自定義圖表選項，然後就可以看到文檔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這個（刪除HIG hcharts.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 %>

來源

2017-09-09 21:18:20

謝謝@Oscar盧扎，我試圖根據您的答案修改文件，但它仍未在圖表中顯示％。請參閱我的編輯問題。 – Slowboy

at你application.js你錯過了這個'// =需要chartkick' –

@Slowboy只刪除'// = require Chart.bundle'而不是其他行，看看編輯 –

Chartkick餅圖在使用庫選項時未顯示百分比

回答

相關問題