Chart.js 柱形圖

柱形圖是一種以長方形的長度為變量的統計圖表。

柱形圖用來比較兩個或以上的價值（不同時間或者不同條件），隻有一個變量，通常利用于較小的資料集分析。

柱形圖的 type 屬性為 bar ，type 描述了圖表類型。

const config = {
  type: 'bar',
  data: data,
  options: {
    scales: {
      y: {
        beginAtZero: true
      }
    }
  },
};

接下來我們建立一個簡單的柱形圖：

執行個體

const ctx = document.getElementById('myChart');

const labels = ['一月份', '二月份', '三月份','四月份', '五月份', '六月份', '七月份']; // 設定 X 軸上對應的标簽

const data = {

labels: labels,

datasets: [{

label: '我的第一個柱形圖',

data: [65, 59, 80, 81, 56, 55, 40],

backgroundColor: [ // 設定每個柱形圖的背景顔色

'rgba(255, 99, 132, 0.2)',

'rgba(255, 159, 64, 0.2)',

'rgba(255, 205, 86, 0.2)',

'rgba(75, 192, 192, 0.2)',

'rgba(54, 162, 235, 0.2)',

'rgba(153, 102, 255, 0.2)',

'rgba(201, 203, 207, 0.2)'

borderColor: [ //設定每個柱形圖邊框線條顔色

'rgb(255, 99, 132)',

'rgb(255, 159, 64)',

'rgb(255, 205, 86)',

'rgb(75, 192, 192)',

'rgb(54, 162, 235)',

'rgb(153, 102, 255)',

'rgb(201, 203, 207)'

borderWidth: 1 // 設定線條寬度

}]

};

const config = {

type: 'bar', // 設定圖表類型

data: data, // 設定資料集

options: {

scales: {

y: {

beginAtZero: true // 設定 y 軸從 0 開始

}

};

const myChart = new Chart(ctx, config);

以上執行個體輸出結果為：

水準柱形圖

水準柱形圖是垂直條形圖的變，常用于顯示資料趨勢，以及并排比較多個資料集。

設定水準柱形圖需要将選項對象中的 indexAxis 屬性設定為 y，indexAxis 屬性的預設值為 x。