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],
}
]
}
});
