Chart.js
創建Chart.js
//一個demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖表第一種配置方式</title>
<script src="Chart.bundle.js"></script>
</head>
<body>
<canvas id="myChart"></canvas>
<script>
var ctx = document.getElementById("myChart").getContext("2d");
// 設置數據內容
var data = {
// 設置圖表中水平軸顯示的內容
labels: ["January", "February", "March", "April", "May", "June", "July"],
// 設置圖表中的數據
datasets: [
{
// 當前圖表數據的標題內容
label: "My First dataset",
// 是否填充折線與水平軸中間的區域
fill: true,
// 設置折線數據點的貝塞爾曲線值（值為0時為折線）
lineTension: 0.1,
// 設置背景顏色
backgroundColor: "rgba(75,192,192,0.4)",
// 設置邊框顏色
borderColor: "rgba(75,192,192,1)",
// 設置折線端點的樣式
borderCapStyle: 'butt',
// 破折號的長度和間距
borderDash: [],
// 破折號的偏移量
borderDashOffset: 0.0,
// 設置折線交點的樣式
borderJoinStyle: 'miter',
// 設置折線數據點的邊框顏色
pointBorderColor: "rgba(75,192,192,1)",
// 設置折線數據點的背景顏色
pointBackgroundColor: "#fff",
// 設置折線數據點的邊框寬度
pointBorderWidth: 1,
// 設置當鼠標懸停折線數據點時的半徑
pointHoverRadius: 5,
// 設置當鼠標懸停折線數據點時的背景顏色
pointHoverBackgroundColor: "rgba(75,192,192,1)",
// 設置當鼠標懸停折線數據點時的邊框顏色
pointHoverBorderColor: "rgba(220,220,220,1)",
// 設置當鼠標懸停折線數據點時的邊框寬度
pointHoverBorderWidth: 2,
// 設置折線數據點的半徑
pointRadius: 1,
//
pointHitRadius: 10,
// 設置折線中所有的數據
data: [65, 59, 80, 81, 56, 55, 40],
// 如果設置為true，將在沒有數據或空數據的點之間繪制直線
spanGaps: false,
}
]
};
var options = {
title: {
display: true,
text: 'Custom Chart Title'
}
}
/*
創建圖表對象
1. 第一種方式 - 新版本提供
var myLineChart = new Chart(ctx, {
type: 'line',
data: data,
options: options
});
2. 第二種方式 - 舊版本支持
var myLineChart = Chart.Line(ctx, {
data: data,
options: options
});
*/
var myLineChart = Chart.Line(ctx, {
data: data,
options: options
});
</script>
</body>
</html>
創建折線圖
new Chart(document.getElementById("canvas"),{
"type":"line", //圖表類型
"data":{
"labels":["January","February","March","April","May","June","July"], //X軸
"datasets":[
{"label":"My First Dataset", //標題
"data":[65,59,80,81,56,55,40], //與labels對應
"fill":false, //是否填充
"borderColor":"rgb(75, 192, 192)",
"lineTension":0.3} //貝塞爾曲線效果
]
},
"options":{}
});
創建柱狀圖
var ctx = document.getElementById('canvas');
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
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)',
'rgba(255, 206, 86, 1)',
'rgba(75, 192, 192, 1)',
'rgba(153, 102, 255, 1)',
'rgba(255, 159, 64, 1)'
],
borderWidth: 1
}]
},
options: {
scales: {
yAxes: [{
ticks: {
beginAtZero:true
}
}]
}
}
});
雷達圖
new Chart(document.getElementById("canvas"),{
"type":"radar",
"data":{
"labels":[
"Eating","Drinking","Sleeping","Designing","Coding","Cycling","Running"
],
"datasets":[
{
"label":"My First Dataset","data":[65,59,90,81,56,55,40],
"fill":true,
"backgroundColor":"rgba(255, 99, 132, 0.2)",
"borderColor":"rgb(255, 99, 132)",
"pointBackgroundColor":"rgb(255, 99, 132)",
"pointBorderColor":"#fff","pointHoverBackgroundColor":"#fff",
"pointHoverBorderColor":"rgb(255, 99, 132)"
},
{
"label":"My Second Dataset","data":[28,48,40,19,96,27,100],
"fill":true,
"backgroundColor":"rgba(54, 162, 235, 0.2)",
"borderColor":"rgb(54, 162, 235)",
"pointBackgroundColor":"rgb(54, 162, 235)",
"pointBorderColor":"#fff",
"pointHoverBackgroundColor":"#fff",
"pointHoverBorderColor":"rgb(54, 162, 235)"}]
},
"options":{
"elements":{
"line":{"tension":0,"borderWidth":3}
}
}
});
極地區域圖
var ctx = document.getElementById('canvas');
var data = {
datasets: [{
data: [
11,16,7,3,14
],
backgroundColor: [
"#FF6384",
"#4BC0C0",
],
label: 'My dataset' // for legend
}],
labels: [
"Red",
"Green",
"Yellow",
"Grey",
"Blue"
]
};
var options = {};
var myPolarAreaChart = new Chart(ctx, {
type: 'polarArea',
data: data,
options: options
});
餅狀圖與環形圖
var ctx = document.getElementById('canvas');
var data = {
labels: [
"Red",
"Blue",
"Yellow"
],
datasets: [
{
data: [300, 50, 100],
backgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
],
hoverBackgroundColor: [
"#FF6384",
"#36A2EB",
"#FFCE56"
]
}]
};
var options = {};
//餅狀圖
var myPieChart = new Chart(ctx,{
type: 'pie',
data: data,
options: options
});
//環形圖
var myDoughnutChart = new Chart(ctx, {
type: 'doughnut',
data: data,
options: options
});
氣泡圖
var ctx = document.getElementById("myChart").getContext("2d");
var data = {
datasets: [
{
label: 'First Dataset',
data: [
{
x: 20,
y: 30,
r: 15
},
{
x: 40,
y: 10,
r: 10
}
],
backgroundColor:"#FF6384",
hoverBackgroundColor: "#FF6384",
}]
};
var options = {};
var myBubbleChart = new Chart(ctx,{
type: 'bubble',
data: data,
options: options
});
設置圖表的位置和大小
將canvas用div包裹起來,設置寬高,使用absolute來固定位置
配置
全局配置
Chart.defaults.global.title.display = true;
Chart.defaults.global.title.text = 'Custom Chart Title';
混合型圖表
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar', //必須設為bar
data: {
labels: ['Item 1', 'Item 2', 'Item 3'],
datasets: [
{
type: 'bar', //要增加type屬性
label: 'Bar Component',
data: [10, 20, 30],
},
{
type: 'line',
label: 'Line Component',
data: [30, 20, 10],
}
]
}
});
