Hike News
Hike News

Chart.js 自訂設計

JavaScript, library, 類型, 圖表類

Chart.js 自訂設計

  • type 是圖表的樣式

  • data 內放的是要用圖表呈現的資料名稱、數值

  • options 是設定個別樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var ctx = document.getElementById('myChart').getContext('2d');
var chart = new Chart(ctx, {
  type: 'line',
  data: {
    // 要呈現的資料
    labels: ['1月', '2月', '3月', '4月', '5月'],  // 水平軸
    datasets: [
      {
        label: 'Apple',  // 資料的標題標籤
        data: [10, 15, 20, 25, 30]
      },{
        label: 'Pear',
        data: [3, 6, 9, 12, 15]
      }
    ]
  }
  options: {
    // 自訂屬性設定
  }
});

標題

1
2
3
4
5
6
7
8
9
options: {
  title: {
    display: true,
    text: '農場收成量',
    fontColor: 'blue',
    fontSize: '24',
    position: 'bottom',  // 標題位置
  }
}

資料的標題標籤

1
2
3
4
5
6
options: {
  legend: {  // 資料標籤的位置
    display: true,
    position: 'right'
  }
}

垂直軸標籤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
options: {
  scales: {  // 縮放屬性
    yAxes: [{  // 設定垂直軸 [使用陣列方式]
      type: 'myScale', // this is the same key that was passed to the registerScaleType function
      ticks: {  // 設定間隔數值
        // 固定數值
        min: 0,  // 最小是 0
        max: 2000,
        
        // 建議數值
        suggestedMin: 0,
        suggestedMax: 2000,
        
        // 值間隔
        stepSize: 400,
        
        // 增加數值文字
        callback: function (value, index, values) {
          return value + '萬顆';
        }
      }
    }]
  }
}

相關說明
https://www.chartjs.org/docs/latest/developers/axes.html

動畫效果

1
2
3
4
5
6
options: {
  animation: {
    duration: 1000,
    easing: 'easeOutQuart'
  }
}

動畫相關說明
https://www.chartjs.org/docs/latest/configuration/animations.html

easing 屬性還有其他可使用項目
https://www.chartjs.org/docs/latest/configuration/animations.html#easing