質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

10853閲覧

chart.jsの散布図で点と点を線で繋ぐ方法

y.kudo

総合スコア6

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2019/08/09 07:15

前提・実現したいこと

chart.jsを使用した散布図で、プロットした点を線で結びたい。
または、折れ線グラフにて、[X:Y]を指定した点をつなぐ折れ線グラフを作りたい。

実現したいグラフは添付の画像になります。イメージ説明

該当のソースコード

javascript

1 var context = document.getElementById('line-chart').getContext('2d'); 2 var line_chart = new Chart(context, { 3 type: 'scatter', 4 data: { 5 datasets: [{ 6 label: '散布図データセット', 7 data: [{ 8 x: 15, 9 y: -1 10 }, { 11 x: 15, 12 y: -2 13 }, { 14 x: 20, 15 y: -3 16 }, { 17 x: 29, 18 y: -4 19 }, { 20 x: 23, 21 y: -5 22 }, { 23 x: 24, 24 y: -6 25 }, { 26 x: 40, 27 y: -7 28 }, { 29 x: 45, 30 y: -8 31 }, { 32 x: 50, 33 y: -9 34 }],fill:false // グラフの下部を塗りつぶさない 35 }] 36 }, 37 options:{ 38 scales:{ 39 xAxes:[{ 40 ticks:{ 41 min:0, // グラフの最小値 42 max:60, // グラフの最大値 43 stepSize:5 // グラフの刻み 44 } 45 }], 46 yAxes:[{ 47 ticks:{ 48 min:-10, // グラフの最小値 49 max:0, // グラフの最大値 50 stepSize:1 // グラフの刻み 51 } 52 }] 53 }, 54 elements:{ 55 line:{ 56 tension: 0 // 線グラフのベジェ曲線を無効にする 57 } 58 } 59 } 60 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

こんばんは。
scatterで点と点を結ぶには showLine のオプションで実現できます。

公式ドキュメント
https://www.chartjs.org/docs/latest/charts/scatter.html
Dataset Properties の見出しからshowLineのオプションを確認できます。

javascript

1var chart = new Chart(ctx, { 2 type: 'scatter', 3 data: { 4 datasets: [{ 5 data: [ 6 { x: 1, y: 8 }, 7 { x: 2, y: 7 }, 8 { x: 1, y: 6 }, 9 { x: 3, y: 5 } 10 ], 11 fill: false, 12 showLine: true 13 }] 14 } 15});

投稿2019/08/09 11:01

編集2019/08/09 11:06
8zca

総合スコア559

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

y.kudo

2019/08/10 00:55

ありがとうございます!!迅速な回答に感謝です!!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問