Chartkickライブラリオプションを使用したときの円グラフが表示されない

私のRORでは、円グラフにPercentagesを追加したいと思っています。円グラフをレンダリングするのにchartkick gemを使用しています。私はこの問題にさまざまなアプローチを試みましたが、どれもうまくいかないようです。私はまた、スタックオーバーフローで似たような記事を拾い読みしてみました。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'} %>

アウトで誰かがより多くの経験を積んこれで私を助けることができるしてください？ OSCARの答え

FOR

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

ちょっとあなたは私の意見を1として、より良い何かhere

を見つけることができます、あなたこのコードを試すことができます。代わりに、この

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

のあなたはねえ、あなたのヘッダーで、コードの下にputhすることができます。この

<%= 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 Bhattさんありがとうございましたが、あなたのソリューションは、私は、まだあなた@Oscarルザありがとう – Slowboy

私はこれに関連して同様の問題がありました。だから、Chart.bundleは円グラフのオプションが代わりに文書で指定されたとおり、あなたがGoogleのチャートを使用することができるの

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

EDIT：あなたapplication.jsはそのHIGを削除する（この

//= 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次のようになります。 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

割合を見ることができない、何も変更されていませんあなたの答えに応じてファイルを修正しようとしましたが、それでもグラフに％が表示されていません。質問に私の編集を参照してください。 – Slowboy

あなたapplication.jsでこの 'が必要です// chartkick'が必要です –

@Slowboyは' // = require Chart.bundle'だけを削除します。他の行ではありません。 'include_tag'を削除すると、 –

Chartkickライブラリオプションを使用したときの円グラフが表示されない

答えて

関連する問題