Biểu đồ hình tròn Chartkick không hiển thị tỷ lệ phần trăm khi sử dụng các tùy chọn thư viện

Trong ROR tôi muốn thêm phần trăm vào Piechart của tôi, tôi đang sử dụng đá quý chartkick để hiển thị biểu đồ hình tròn. Tôi đã thử các cách tiếp cận khác nhau cho vấn đề này, nhưng không có cách nào có hiệu quả. Tôi cũng đã googled xung quanh và nhìn vào các bài viết tương tự tại tràn ngăn xếp.Biểu đồ hình tròn Chartkick không hiển thị tỷ lệ phần trăm khi sử dụng các tùy chọn thư viện

Đây là những gì tôi đã đưa ra nhưng không hiển thị%.

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

Tôi cũng đã thử phương pháp này, nhưng vẫn có ra một may mắn

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

Hãy có thể ai đó có kinh nghiệm hơn giúp tôi với điều này?

UPADATE CHO ĐÁP Oscar

Tôi làm theo các hướng dẫn được cung cấp cho câu trả lời của Oscar nhưng nó% vẫn không hiển thị.

này như thế nào <head> trong application.html.erb trông:

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

và appplication.js là như thế này:

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

Nguồn

2017-09-07 Slowboy

hey Bạn có thể tìm thấy cái gì đó tốt hơn here

Theo quan điểm của tôi, bạn có thể thử mã này. Thay vì điều này

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

Bạn có thể Hãy thử này

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

Hey bạn có thể puth dưới mã trong tiêu đề của bạn.

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

Nguồn

2017-09-07 12:22:09

Cảm ơn bạn @Ronak Bhatt nhưng giải pháp của bạn không được thay đổi bất cứ điều gì, vẫn không thể thấy tỷ lệ – Slowboy

Tôi gặp sự cố tương tự khi làm việc với điều này. Vì vậy, Chart.bundle không quy định các tùy chọn cho biểu đồ pie

Thay vì đó bạn có thể sử dụng Biểu đồ Google như quy định tại giấy tờ here

Vì vậy, những gì bạn phải làm là loại bỏ //= require Chart.bundle từ application.js

Go đến application.html.erb hoặc bố cục mà bạn đang sử dụng để hiển thị chế độ xem của mình và trước <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> hoặc thứ gì đó tương tự mà bạn có để tải js libs thêm <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>. Nó sẽ trông giống như sau:

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

Và còn có !. Ngoài ra tôi nhận thấy rằng bạn đang thiếu một "]" tại mã của bạn.Sửa mà bạn có thể chạy các bảng xếp hạng với điều này:

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

Bạn sẽ có thể thấy tỷ lệ phần trăm mà không cần thêm bất kỳ tùy chọn

Nếu bạn muốn tùy chỉnh các tùy chọn biểu đồ sau đó bạn có thể xem tài liệu here

EDIT: bạn application.js sẽ trông như thế này

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

Và application.html.erb or the layout that you are using at your controller like bạn này (xóa HIG rằng include_tag hcharts.js ở cuối bạn không cần nó):

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

Nguồn

2017-09-09 21:18:20

Cảm ơn bạn @ Oscar Luza, tôi đã cố gắng sửa đổi các tệp theo câu trả lời của bạn, nhưng nó vẫn không hiển thị% trong biểu đồ. Vui lòng xem chỉnh sửa của tôi cho Câu hỏi. – Slowboy

tại bạn application.js bạn đang thiếu này // // = require chartkick' –

@Slowboy chỉ xóa '// = yêu cầu Chart.bundle' không phải dòng khác, hãy xem chỉnh sửa –

Biểu đồ hình tròn Chartkick không hiển thị tỷ lệ phần trăm khi sử dụng các tùy chọn thư viện

Trả lời

Các vấn đề liên quan