このサイトのchart.jsを使ってレーダーチャートを表示するを参考にレーダーチャートではなく、折れ線グラフを表示したいと考えていますが、折れ線グラフの表示ができません。具体的にどの部分を変更すれば良いのか、ご教授頂けますでしょうか？
H_ishi さん
参考にしているページですが、確かページのまま進めるとレーダーチャート自体、表示できなかったと思いますが、
レーダーチャートの表示はできますでしょうか？
しぶい様
レーダーチャートの表示は正常に行えています。
たしか、chart.jsのURLを変更すればできたと思います。
H_ishi さん
ありがとうございます。
chart.js のバージョンによって書き方が、多少変わるので 設定URL の変更を行って Tips のソースコードそのままで
動いている前提で進めます。
Tips に以下のコードがあると思います。
varmyChart=newChart(elCanvas.getContext("2d")).Radar(data, options);
上記の Radar を Line にすることで、線グラフにすることは可能でした。
ただ、完全な折れ線グラフはおそらく、設定で適宜作っていく感じになります。
しぶい様
チャートの変更を確認できました。本当にありがとうございました。
今後、細かな設定を試行錯誤しながら行って行きたいと思います。
一点だけ、気になったのでお聞きしたいのですが、凡例の表示について、
label:〇〇,
が凡例の設定と思いますが、グラフには凡例が表示されておりません。
なにか非表示の設定でもされているのでしょうか？
H_ishi さん
確かに凡例表示されないですね。
自分が調べた感じなのですが、Chart.js のバージョンが 1.x とかだと、凡例表示するのは、Tips の方法だけでなく
一手間加えないといけないみたいです。自分は、このページを参考にしたら表示されましたが、
ぶっちゃけ Chart.js を最新のバージョンにしたほうが楽です。
最初にバージョンを最新に変えた場合の説明をしようと思ったのですが、多分話がややこしくなると思ったので控えましたが、
バージョン1.x で凡例表示するほうが遥かにややこしいので、申し訳ないのですが、バージョン 2.x の場合の説明をさせていただきます。
2.x 以上なら多分動くと思いますが自分は 2.7.3 でやりました。
まず、バージョン 2.x の場合、グラフの表示のさせ方が変わります。
varmyChart =newChart(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 の公式ドキュメントを日本語化したページもありますので、それも参考にしながら
適宜設定し、環境に合わせたグラフ作成できると思います。
しぶい様
ご教授頂き、ありがとうございます。
当方が希望する形でのグラフの描画に近づいており、大変感謝しております。
細かい設定については、こちらでも試行錯誤しながら、学んでいきたいと思います。
また不明な点等についてお聞きすることがあると思いますが、お時間許しましたら、
ご教授頂けると幸いです。本当にありがとうございました。