配色を自動で決定するように変更

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

@@ -31,14 +31,6 @@ chart=true
         datasets: [{
             label: '# of Votes',
             data: [12, 19, 3, 5, 2, 3],
-            backgroundColor: [
-                'rgba(255, 99, 132, 0.2)',
-                'rgba(54, 162, 235, 0.2)',
-                'rgba(255, 206, 86, 0.2)',
-                'rgba(75, 192, 192, 0.2)',
-                'rgba(153, 102, 255, 0.2)',
-                'rgba(255, 159, 64, 0.2)'
-            ],
             borderColor: [
                 'rgba(255, 99, 132, 1)',
                 'rgba(54, 162, 235, 1)',
@@ -57,6 +49,12 @@ chart=true
                     beginAtZero: true
                 }
             }]
+        },
+        plugins: {
+          colorschemes: {
+            scheme: 'tableau.Tableau20',
+            fillAlpha: 0.3
+          }
         } 
       }
   });
@@ -85,14 +83,6 @@ chart=true
         datasets: [{
             label: '# of Votes',
             data: [12, 19, 3, 5, 2, 3],
-            backgroundColor: [
-                'rgba(0,0,0,0)',
-                'rgba(0,0,0,0)',
-                'rgba(0,0,0,0)',
-                'rgba(0,0,0,0)',
-                'rgba(0,0,0,0)',
-                'rgba(0,0,0,0)'
-            ],
             borderColor: [
                 'rgba(255, 99, 132, 1)',
                 'rgba(54, 162, 235, 1)',
@@ -111,6 +101,12 @@ chart=true
                     beginAtZero: true
                 }
             }]
+        },
+        plugins: {
+          colorschemes: {
+            scheme: 'tableau.Tableau20',
+            fillAlpha: 0.3
+          }
         } 
     }
 });
@@ -139,12 +135,6 @@ chart=true
     data: {
       labels: ["A", "O", "B", "AB"],
       datasets: [{
-          backgroundColor: [
-              "#BB5179",
-              "#FAFF67",
-              "#58A27C",
-              "#3C00FF"
-          ],
         data: [38, 31, 21, 10]
       }]
     },
@@ -152,6 +142,12 @@ chart=true
       title: {
         display: true,
         text: 'Blood Type Ratio'
+      },
+      plugins: {
+        colorschemes: {
+          scheme: 'tableau.Tableau20',
+          fillAlpha: 0.3
+        }
       } 
     }
   });
@@ -179,14 +175,12 @@ chart=true
       datasets: [{
         label: 'Alice',
         data: [92, 72, 86, 74, 86],
-        backgroundColor: 'RGBA(225,95,150, 0.5)',
         borderColor: 'RGBA(225,95,150, 1)',
         borderWidth: 1,
         pointBackgroundColor: 'RGB(46,106,177)'
       }, {
         label: 'Bob',
         data: [73, 95, 80, 87, 79],
-        backgroundColor: 'RGBA(115,255,25, 0.5)',
         borderColor: 'RGBA(115,255,25, 1)',
         borderWidth: 1,
         pointBackgroundColor: 'RGB(46,106,177)'
@@ -206,6 +200,12 @@ chart=true
             return  value
           }
         }
+      },
+      plugins: {
+        colorschemes: {
+          scheme: 'tableau.Tableau20',
+          fillAlpha: 0.3
+        }
       } 
     }
   });
@@ -240,13 +240,11 @@ chart=true
       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)',
+          data: [{x:90, y:82},{x:39, y:45},{x:63, y:65},{x:83, y:75},{x:83, y:95}]
           }, 
         {
           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)',
+          data: [{x:97, y:92},{x:63, y:70},{x:48, y:52},{x:83, y:79},{x:66, y:74}]
         }]
     },
     options:{
@@ -283,11 +281,20 @@ chart=true
             }
           }
         }]
+      },
+      plugins: {
+        colorschemes: {
+          scheme: 'tableau.Tableau20',
+          fillAlpha: 0.3
+        }
       }
     }
   });
 {{< /chart >}}
 
+### 積み上げ棒グラフ
+
+
 
 ## 参考
 - [Chart.jsでグラフを描画してみた - Qiita](https://qiita.com/Haruka-Ogawa/items/59facd24f2a8bdb6d369#3-2-%E6%A3%92%E3%82%B0%E3%83%A9%E3%83%95)