search

konchanxxx / menta

MENTAのタスク管理用リポジトリ
0 stars 0 forks source link

Chart.jsが正常に動作しません。 #51

Closed machamp0714 closed 5 years ago

machamp0714 commented 5 years ago

概要

現在作成しているポートフォリオにChart.jsを導入しました。 次の投稿ページからユーザーは、チャートグラフを作成して、 記事にグラフを挿入することができます。 https://i.gyazo.com/18f59ab9cb98e970d6972cdea2fd2a14.png

実現したいこと

実現したいことが２つあります。 まず、Chart.jsによって生成されたグラフのviewの修正。 次に、記事詳細ページにて、正常にグラフが生成されること です。

困っていること

実現したいこと同様２つあります。 Chart.jsのoptionsに目盛りの設定を修正しても 自分の意図したグラフを作ることが出来ません。 https://github.com/machamp0714/love_kitchen/blob/master/app/assets/javascripts/chart.coffee このような設定なのですが、何が間違っているのか全くわからず 正直お手上げ状態です。

また、記事詳細ページにてグラフが生成される際の挙動がおかしいです。 具体的には、まず次の記事を閲覧するとします。すると、このような グラフが生成されます。 https://i.gyazo.com/4d45d3a93e036c472d5232705ed88e1d.png 次に違う記事を閲覧します。すると、次のグラフが生成されます。 しかし、こちらのグラフはこの記事に挿入されたグラフではありません。 https://i.gyazo.com/a1716bdcddb368851d4e98b597058cc9.png そして、更新すると本来生成されるはずだったグラフがちゃんと生成されます。 https://i.gyazo.com/99e01012752b72131409dc45eabea715.png 何故か、直前に閲覧した記事のデータが反映されてグラフが生成されてしまいます。

解決するために行ったこと

Chart.jsのversionを2.8.0にupdateしましたが、特に何も変わらず。

問題となっているアプリケーションのGitHub URL

https://github.com/machamp0714/love_kitchen 不足している情報があればお教え下さい。

お手数お掛けしますが、よろしくお願いします。

konchanxxx commented 5 years ago

なるほど、Chart.jsあまり詳しくないので調ベる&&動作確認して回答します:bow: ちょっとお時間頂くことになると思います。少々お待ちください:bow:

machamp0714 commented 5 years ago

@rexitorg さん、お早い対応ありがとうございます 🙇 僕も公式のドキュメント読み込んで色々試してみようと思います 👍

konchanxxx commented 5 years ago

環境構築して動作確認しましたー:smile: まずグラフの値が更新されない問題ですけどこれって全部のデータが同じ値になっているからじゃないでしょうか？ 試しに記事id2のデータを書き換えてみたら正常に動作しているように見えました:bow:

Article.find(2).update(data1: 5, data2: 5, data3: 5, data4: 5, data5: 5)

すると下記のように表示された

スクリーンショット 2019-03-21 15 45 27

konchanxxx commented 5 years ago

Chart.jsのoptionsに目盛りの設定を修正しても自分の意図したグラフを作ることが出来ません。

それでもう一つの質問なのですが意図したグラフっていうのがどういうグラフか確認できていなかったので教えていただいても良いでしょうか？宜しくお願いします:bow:

konchanxxx commented 5 years ago

書き換えた2以外同じデータが入っている

Article.select(*%i[data1 data2 data3 data4 data5])
  Article Load (0.5ms)  SELECT `articles`.`data1`, `articles`.`data2`, `articles`.`data3`, `articles`.`data4`, `articles`.`data5` FROM `articles`
=> [#<Article:0x00007fc0d7673528 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7673370 id: nil, data1: 5, data2: 5, data3: 5, data4: 5, data5: 5>,
 #<Article:0x00007fc0d7673140 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7672f88 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7672d30 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7672b50 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7672998 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d76727e0 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7672600 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7672448 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7672290 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7672060 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7671ea8 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7671ca0 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7671ac0 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d76718b8 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7671700 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7671480 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d76712c8 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>,
 #<Article:0x00007fc0d7671110 id: nil, data1: 1, data2: 2, data3: 3, data4: 4, data5: 5>]
konchanxxx commented 5 years ago

@machamp0714 こちらご確認宜しくお願いします:bow:

machamp0714 commented 5 years ago

解答ありがとうございます 😋 グラフ更新の問題ですが自分で記事を作って動作確認してみましたが、 やはりグラフが上書きされて表示されてしまいます。 僕の環境ですと、次のような感じになります。 まず次のような記事一覧から https://i.gyazo.com/f5a7355da3c93bf6c38f5912a5e0db7f.png 上から２番目の記事詳細に移動します。

https://i.gyazo.com/6c432860bf4de7efeffd93dd103f5ce4.png この記事のデータはこんな感じです。 { label1: ラベル１ label2: ラベル２ label3: ラベル３ data1: 1 data2: 2 data3: 3 }

次に一番上の記事に移動します。 https://i.gyazo.com/7de7193782524daeb0c5cd42b856da40.png この記事のデータは↓です。 { label1: ラベル１ label2: ラベル２ label3: ラベル３ label4: ラベル４ data1: 5 data2: 5 data3: 4 data4: 2 }

そして、また上から２番目の記事に移動すると https://i.gyazo.com/b23eb8391082ca104b611420d27cbafd.png となってしまいます。

状況を整理すると、 現在見ている記事のグラフが直前に参照した記事のグラフで 上書きされてしまっている、という感じです。

分かりにくくてすいません 🙇 よろしくお願いします 🙇

machamp0714 commented 5 years ago

あとグラフ作成の件なのですが、 原点が０、グラフの最大値は５、目盛りの間隔は１ というグラフを作りたいと思っています。 そしてlabelsやdataに入っているデータによってグラフの形状が変わります。 labels,dataのデータが５個入っていれば五角形、４個であれば四角形、３個であれば三角形 といった具合です。

問題になっているのが、こちらのファイルです。 https://github.com/machamp0714/love_kitchen/blob/master/app/assets/javascripts/chart.coffee optionsの値をいじってもグラフのデザインに反映されないことに困っています。 設定もこれで行けると思ったのですが、 data1~5に入っている値の最小値が原点になっちゃうんですよね。 原点は常に０であって欲しいのですが；； そして'suggestedMax: 5'となっているので、それに応じて'stepSize'の値が決まってしまう という具合でしょうか。 恐らく'beginAtZero: true'の設定が正常に反映されれば行けると推測しているのですが、 こちらも手詰まりです 🤕

言葉足らずですいませんでした 🙇 よろしくお願いします 🙇

konchanxxx commented 5 years ago

おーなるほど、ありがとうございます！もう一度確認してみます:bow:

konchanxxx commented 5 years ago

こちらたぶん直せたっぽいです。turbolinksが影響していてgonで更新された値が毎回reloadされないようです。下記のissueが関係していそう。 https://github.com/gazay/gon/issues/106

なので

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title> <%= custom_title(yield(:title)) %> </title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
    <%= Gon::Base.render_data() %> <= 修正箇所
    <%= render 'shared/navigation' %>
    <%= render 'layouts/flash' %>
    <%= yield %>
  </body>
</html>

gonのデータ読み込みをbodyに持ってきてあげるとうまく動作しているようでした:bow:

GAの質問でも同じようなのあったな。turbolinksがらみやもしれない...ちょっと調べてみるか。 https://github.com/rexitorg/menta/issues/45

一旦動くようになるのでご確認願いします:bow: オプションも確認します:bow:

konchanxxx commented 5 years ago

オプションの方もいけましたー:smile: 下記のページを ~パクり~ 参考にしました

http://www.chaordic.co.jp/memorandum/2017/08/chartjs.html

chart.coffee

window.draw_example_chart = ->
  ctx = document.getElementById("myChart").getContext('2d')
  myChart = new Chart(ctx, {
    type: 'radar',
    data: {
      labels: ['オススメ', '価格', 'デザイン', '切れ味', '使い易さ'],
      datasets: [{
        label: '例',
        data: [5, 4, 4, 4, 3],
        backgroundColor: 'rgba(255, 206, 86, 0.2)',
        borderColor: 'rgba(255, 206, 86, 1.0)',
        borderWidth: 1,
        pointRadius: 3.5,
        pointBackgroundColor: 'rgba(255, 206, 86, 1)',
        pointBorderColor: '#fff'
      }]
    },
    options: {
      scales: {
        ticks: {
          beginAtZero: true,
          min: 0,
          suggestedMax: 5,
          stepSize: 1
        }
      }
    }
  });

window.draw_chart = ->
  ctx = document.getElementById("myRadarChart").getContext('2d')
  chart = new Chart(ctx, {
    type: 'radar',
    data: {
      labels: gon.labels,
      datasets: [{
        label: 'chart',
        data: gon.data,
        backgroundColor: 'rgba(255, 206, 86, 0.2)',
        borderColor: 'rgba(255, 206, 86, 1.0)',
        borderWidth: 1,
        pointRadius: 3.5,
        pointBackgroundColor: 'rgba(255, 206, 86, 1)',
        pointBorderColor: '#fff'
      }]
    },
    options: {
      animation: false,
      showTooltips: false,
      legend: {position: 'bottom'},
      title: {
        display: true,
        fontSize: 20,
      },
      scale: {
        display: true,
        ticks: {
          display: true,
          fontSize: 12,
          min: 0,
          max: 5,
          beginAtZero: true
        },
        gridLines: {
          display: true,
        }
      }
    }
  });
konchanxxx commented 5 years ago

@machamp0714 こちら諸々解決したと思うのでご確認願います:bow:

konchanxxx commented 5 years ago

おそらくオプションは display: true が必要だった模様 https://www.chartjs.org/docs/latest/charts/radar.html

machamp0714 commented 5 years ago

回答ありがとうございます 🙇 確認遅れてすいません！今試してみますね！

machamp0714 commented 5 years ago

先ほど、コードの修正を行った所、無事希望通りの機能を実装することが出来ました 👍 更新系の問題ですが、まさかgonに原因があったとは思いませんでした。 railsがどう動いてるのか全体をきちんと把握しないとダメですね 👨‍🎓 あと、optionsの設定が反映されない問題の件ですが、こちらただのタイプミスだったかもです(泣) 教えて頂いた http://www.chaordic.co.jp/memorandum/2017/08/chartjs.html こちらの記事の設定を一度丸パクリして挙動を確認しようとコードを入力していて タイプミスがあったことに気が付きました。 どうも display: true はなくても行けるようです。 sclae オプションは ticks 以外のオプションが含まれることもあるので、 勝手に複数形だと完全に思い込んでしまったのがダメでしたね；；

options: {
            animation: false
            scale: { ← 'scales'となっていた
                ticks: {
                    beginAtZero: true,
                    min: 0,
                    max: 5,
                    stepSize: 1,
                }
            }
        }

これでいけました。 お騒がせして申し訳ないです 🙇 ありがとうございました 🙇

konchanxxx commented 5 years ago

解決したようで良かったです！:smile:

どうも display: true はなくても行けるようです。

あ、そうなんですね。ローカルで外して見たときに挙動が変わったのでそれが原因かと思っていました。見間違いだったかorz