ruby on rails - react - Gráfico circular Chartkick que no muestra porcentajes al usar las opciones de la biblioteca
rails groupdate (2)
Tuve un problema similar al trabajar con esto. Entonces Chart.bundle no proporciona esas opciones para el gráfico circular
En lugar de eso, puede usar Google Charts como se especifica en la documentación aquí
Entonces, lo que tienes que hacer es eliminar //= require Chart.bundle desde application.js
Vaya a application.html.erb o al diseño que está utilizando para mostrar su vista y antes de <%= javascript_include_tag ''application'', ''data-turbolinks-track'': ''reload'' %> o algo similar que tenga para cargar js libs agrega <%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %> . Se verá así:
<%= javascript_include_tag "https://www.gstatic.com/charts/loader.js" %>
<%= javascript_include_tag ''application'', ''data-turbolinks-track'': ''reload'' %>
¡Y ahí está!. También noté que te falta un "]" en tu código. Arreglando que puede ejecutar la tabla con esto:
<%= pie_chart [["Soccer", @soccer_total], ["Basketball", @basketball_total], ["Baseball", @baseball_total], ["Other", @other_total ]] %>
Debería poder ver los porcentajes sin agregar ninguna opción
Si desea personalizar las opciones de gráfico, puede ver la documentación aquí
EDIT: tu application.js debería verse así
//= require jquery
//= require jquery_ujs
//= require chartkick
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
Y su application.html.erb or the layout that you are using at your controller like esta manera (elimine ese Highcharts.js include_tag al final no lo necesita):
<%= 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 %>
En mi ROR quiero agregar Porcentajes a mi Piechart, estoy usando la gema chartkick para representar el gráfico circular. He intentado varios enfoques para el problema, pero ninguno parece funcionar. También busqué en Google y veo publicaciones similares en el desbordamiento de la pila.
Esto es lo que se me ocurrió, pero no muestra el%.
<%= pie_chart [["Soccer", @soccer_total], ["Basketball", @basketball_total, ["Baseball", @baseball_total], ["Other", @other_total ]], library: {legend: {labelFormat: ''{name} : {y} ({percentage}%)''}} %>
También probé este enfoque, pero aún sin suerte
<%= pie_chart [["Soccer", @soccer_total], ["Basketball", @basketball_total, ["Baseball", @baseball_total], ["Other", @other_total ]], library: {pieSliceText: ''value-and-percentage''} %>
Por favor, ¿alguien más experimentado me puede ayudar con esto?
ACTUALIZAR PARA LA RESPUESTA DE OSCAR
Seguí las instrucciones proporcionadas para la respuesta de Oscar, pero todavía no muestra%.
Así es como se ve el <head> en 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" %>
y el appplication.js es así:
//
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require turbolinks
//= require_tree .
hey, puedes encontrar algo mejor aquí
Según mi opinión, puedes probar este código. En lugar de esto
<%= pie_chart [["Soccer", @soccer_total], ["Basketball", @basketball_total, ["Baseball", @baseball_total], ["Other", @other_total ]], library: {pieSliceText: ''value-and-percentage''} %>
Puedes probar esto
<%= pie_chart [["Soccer", @soccer_total], ["Basketball", @basketball_total, ["Baseball", @baseball_total], ["Other", @other_total ]], library: {pieSliceText: ''value''} %>
Oye, puedes poner debajo del código en tu encabezado.
<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>