散布図のグラフを追加

content/labs/visualization/2020-06-13-different-types-of-graphs.md

@@ -229,5 +229,60 @@ chart=true
 
 > 伝えたい内容は、2つのデータ項目間の比較でも推移でも偏りでもありません。「関係」というデータ同士のつながりです。
 
+{{<chart canvas="scatter-chart" height="200">}}
+  var ctx = document.getElementById("scatter-chart");
 
+  var myScatterChart = new Chart(ctx, {
+    type: 'scatter', 
+    data: { 
+      datasets: [
+        {
+          label: '1st Class',
+          data: [{x:90, y:82},{x:39, y:45},{x:63, y:65},{x:83, y:75},{x:83, y:95}],
+          backgroundColor: 'RGBA(225,95,150, 1)',
+        }, 
+        {
+          label: '2nd Class',
+          data: [{x:97, y:92},{x:63, y:70},{x:48, y:52},{x:83, y:79},{x:66, y:74}],
+          backgroundColor: 'RGBA(115,255,25, 1)',
+        }]
+    },
+    options:{
+      title: {
+        display: true,
+          text: 'Test Results'
+      },
+      scales: {
+        xAxes: [{        
+          scaleLabel: {             
+            display: true,          
+            labelString: 'English' 
+          },
+          ticks: {
+            suggestedMin: 0,
+            suggestedMax: 100,
+            stepSize: 10,
+            callback: function(value, index, values){
+              return  value
+            }
+          }
+        }],
+        yAxes: [{        
+          scaleLabel: {             
+            display: true,          
+            labelString: 'Math' 
+          },
+          ticks: {
+            suggestedMax: 100,
+            suggestedMin: 0,
+            stepSize: 10,
+            callback: function(value, index, values){
+              return  value
+            }
+          }
+        }]
+      }
+    }
+  });
+{{< /chart >}}