新規投稿
フォローする

chart.jsを使用して折れ線グラフをレコード詳細画面に表示する方法

このサイトのchart.jsを使ってレーダーチャートを表示するを参考にレーダーチャートではなく、折れ線グラフを表示したいと考えていますが、折れ線グラフの表示ができません。具体的にどの部分を変更すれば良いのか、ご教授頂けますでしょうか?

0

6件のコメント

Avatar
しぶい

H_ishi さん

参考にしているページですが、確かページのまま進めるとレーダーチャート自体、表示できなかったと思いますが、

レーダーチャートの表示はできますでしょうか?

0
Avatar
H_ishi

しぶい様

レーダーチャートの表示は正常に行えています。

たしか、chart.jsのURLを変更すればできたと思います。

0
Avatar
しぶい

H_ishi さん

ありがとうございます。

chart.js のバージョンによって書き方が、多少変わるので 設定URL の変更を行って Tips のソースコードそのままで

動いている前提で進めます。

Tips に以下のコードがあると思います。

var myChart = new Chart(elCanvas.getContext("2d")).Radar(data, options);

上記の Radar を Line にすることで、線グラフにすることは可能でした。

ただ、完全な折れ線グラフはおそらく、設定で適宜作っていく感じになります。

0
Avatar
H_ishi

しぶい様

チャートの変更を確認できました。本当にありがとうございました。

今後、細かな設定を試行錯誤しながら行って行きたいと思います。

 

一点だけ、気になったのでお聞きしたいのですが、凡例の表示について、

label:〇〇,

が凡例の設定と思いますが、グラフには凡例が表示されておりません。

なにか非表示の設定でもされているのでしょうか?

0
Avatar
しぶい

H_ishi さん

確かに凡例表示されないですね。

自分が調べた感じなのですが、Chart.js のバージョンが 1.x とかだと、凡例表示するのは、Tips の方法だけでなく

一手間加えないといけないみたいです。自分は、このページを参考にしたら表示されましたが、

ぶっちゃけ Chart.js を最新のバージョンにしたほうが楽です。

最初にバージョンを最新に変えた場合の説明をしようと思ったのですが、多分話がややこしくなると思ったので控えましたが、

バージョン1.x で凡例表示するほうが遥かにややこしいので、申し訳ないのですが、バージョン 2.x の場合の説明をさせていただきます。

2.x 以上なら多分動くと思いますが自分は 2.7.3 でやりました。

まず、バージョン 2.x の場合、グラフの表示のさせ方が変わります。

var myChart = new Chart(elCanvas.getContext("2d")).Radar(data, options);

だったところを、以下のようにしてください。

var myChart = new Chart(elCanvas.getContext("2d") , {
   type: "line",
   data: data,
   options: options
});

1.x の場合、グラフの種類は関数として書いてたのですが、2.x 以上では引数の中にそのまま入れる仕様になるみたいです。

グラフの中身に関しては、Tips の書き方とあまり差異はないのですが、恐らく設定値の名称などが変わっています。

ちゃんと調べてないので断定はできませんが、Tips の ~Color系の 設定値を

borderColor、backgroundColor に変更しても Tips 通りの色が再現できます。

色とかなどの、見た目だけ、Tips に似せました。

var data = {
   labels: ["国語", "数学", "英語", "社会", "理科"],
   datasets: [
      {
         label: "My First dataset",
         borderColor: 'rgba(0,140,232,.4)',
         backgroundColor:'rgba(0,140,232,.4)',
         // lineTension: 0, <- 折れ線グラフをなめらかにするか、一般的な折れ線にするかの設定値です。
// 一般的にする場合、コメントアウトを外してください
         data: [
            record['Japanese']['value'],
            record['Mathematics']['value'],
            record['English']['value'],
            record['Social_studies']['value'],
            record['Science']['value']
         ]
      },
   ]
}

option は、最悪何も、設定しなくても、表示されますが、

グラフの最低値、最高値決める設定値などもありました。

var options = {
   scales: {
      yAxes: [{
         type: 'linear',
         ticks: {
            max: 100,
            min: 10
         }
      }]
   }
}

とりあえず data のほうは上記のコードで、H_ishi さんの想定に近い動作すると思います。

言っていることがあっち行ったり、こっち行ったりして大変申し訳ないです。

一応、自分が調べた感じ、Chart.js を調べた時、大体最新バージョンの書き方が出てきましたので、

バージョン番号を最新にすることにも利点はあると思います。

自分が折れ線グラフのやり方を調べた際にも、以下のページが出てきましたので。

Chart.jsで作成する折れ線グラフの実例

Chart.jsでグラフを描画する(折れ線グラフ)

設定値などに関しては、Chart.js の公式ドキュメントを日本語化したページもありますので、それも参考にしながら

適宜設定し、環境に合わせたグラフ作成できると思います。

しぶいにより編集されました
0
Avatar
H_ishi

しぶい様

ご教授頂き、ありがとうございます。

当方が希望する形でのグラフの描画に近づいており、大変感謝しております。

細かい設定については、こちらでも試行錯誤しながら、学んでいきたいと思います。

また不明な点等についてお聞きすることがあると思いますが、お時間許しましたら、

ご教授頂けると幸いです。本当にありがとうございました。

0
サインインしてコメントを残してください。