首页 文章

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

提问于
浏览
9

在我的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", @soccer_total], ["Basketball",  @basketball_total, ["Baseball",  @baseball_total], ["Other", @other_total ]], library: {pieSliceText: 'value-and-percentage'} %>

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

UPADATE FOR OSCAR'S ANSWER

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

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

3 回答

  • 4

    我遇到了类似的问题 . 所以 Chart.bundle 没有提供饼图的选项

    而不是你可以使用文档here中指定的Google Charts

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

    转到application.html.erb或用于显示视图的布局,在 <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> 或类似的加载js libs之前添加 <%= 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 这个(删除那个你不需要它的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 %>
    
  • 4

    嘿,你可以找到更好的东西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'} %>
    

    Hey you can puth below code in your header.

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

    我这样做了

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

    2)我在饼图中使用了以下库选项:

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

相关问题