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

前提・実現したいこと

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  });

行動規範の内容に同意します

回答1件

ベストアンサー

こんばんは。
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});