在上一節課中我們學習了如何利用chart.js畫一個簡單的柱狀圖（參見上節課ppt），在本次課中將向大家介紹如何改變柱狀圖的樣式。首先，我們來改變柱狀圖的大小，代碼如下：
1 <div class="chart-container" style="position: relative; height:40vh; width:40vw"> 2 <canvas id="myChart" ></canvas> 3 </div>
在上面的代碼中，我們將canvas畫布元素放在一對<div></div>標簽中，通過改變div元素的大小來改變柱狀圖的大小。40vh的含義是占整個屏幕高度的40%，40vw的含義是占整個屏幕寬度的40%。
除了要把畫布元素放在<div>容器里外，要想改變柱狀圖的大小還需要在構造函數的options對象屬性（參見上節課的ppt）中加入以下兩行代碼：
1 options: { 2 responsive:true, 3 maintainAspectRatio: false 4 }
至此，我們可以等到一個縮小版的柱狀圖如下：
除了改變柱狀圖的大小，還可以改變柱狀圖中每個柱子的顏色，具體方法是在dataset對象(見上節課的ppt)的backgroundColor屬性中指定每個柱子的顏色值，具體代碼如下：
1 datasets: [{ 2 label: '# of Votes', 3 data: [12, 19, 3, 5, 4, 3], 4 backgroundColor: [ 5 'rgba(255, 99, 132, 0.2)', 6 'rgba(54, 162, 235, 0.2)', 7 'rgba(255, 206, 86, 0.2)', 8 'rgba(75, 192, 192, 0.2)', 9 'rgba(153, 102, 255, 0.2)', 10 'rgba(255, 159, 64, 0.2)' 11 ], 12 13 }]
在上述代碼中rgba函數可以指定紅綠藍三個顏色通道的數值以及指定透明度。柱狀圖的顯示效果如下：
除了可以指定柱子的顏色外還可以通過dataset對象的borderWidth和borderColor屬性指定柱子邊框的粗細和顏色，代碼如下：
1 datasets: [{ 2 label: '# of Votes', 3 data: [12, 19, 3, 5, 4, 3], 4 backgroundColor: [ 5 'rgba(255, 99, 132, 0.2)', 6 'rgba(54, 162, 235, 0.2)', 7 'rgba(255, 206, 86, 0.2)', 8 'rgba(75, 192, 192, 0.2)', 9 'rgba(153, 102, 255, 0.2)', 10 'rgba(255, 159, 64, 0.2)' 11 ], 12 borderWidth:4, 13 borderColor:'black' 14 }]
顯示效果如下：
在options屬性中可以加入title屬性（也是對象類型）來指定柱狀圖的標題，其中，fontSize可以設定標題的字號。代碼如下：
1 options: { 2 responsive:true, 3 maintainAspectRatio: false, 4 title:{ 5 display:true, 6 text:'My Favorite Colors'，
fontSize:25 7 } 8 }
可以在options中通過改變legend屬性的值來隱藏圖例，代碼如下：
1 options: { 2 responsive:true, 3 maintainAspectRatio: false, 4 title:{ 5 display:true, 6 text:'My Favorite Colors', 7 fontSize:25 8 }, 9 legend: { 10 display: false, 11 12 } 13 14 }
在options中通過將legend屬性的position值設為'right'可以讓圖例在右側顯示。
1 options: { 2 responsive:true, 3 maintainAspectRatio: false, 4 title:{ 5 display:true, 6 text:'My Favorite Colors', 7 fontSize:18 8 }, 9 legend: { 10 display: true, 11 position:'right', 12 13 } 14 15 }
最后，本次課的完整代碼如下：
1 <html> 2 <head> 3 4 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> 5 6 </head> 7 <body> 8 <div class="chart-container" style="position: relative; height:40vh; width:40vw"> 9 <canvas id="myChart" ></canvas> 10 </div> 11 <script> 12 var ctx = document.getElementById('myChart').getContext('2d'); 13 var myChart = new Chart(ctx, { 14 type: 'bar', 15 data: { 16 labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'], 17 datasets: [{ 18 label: '# of Votes', 19 data: [12, 19, 3, 5, 4, 3], 20 backgroundColor: [ 21 'rgba(255, 99, 132, 0.2)', 22 'rgba(54, 162, 235, 0.2)', 23 'rgba(255, 206, 86, 0.2)', 24 'rgba(75, 192, 192, 0.2)', 25 'rgba(153, 102, 255, 0.2)', 26 'rgba(255, 159, 64, 0.2)' 27 ], 28 borderWidth:4, 29 borderColor:'black' 30 }] 31 }, 32 33 34 options: { 35 responsive:true, 36 maintainAspectRatio: false, 37 title:{ 38 display:true, 39 text:'My Favorite Colors', 40 fontSize:18 41 }, 42 legend: { 43 display: true, 44 position:'right', 45 46 } 47 48 } 49 }); 50 </script> 51 52 </body> 53 </html>