Chart.js
创建Chart.js
//一个demo
图表第一种配置方式
创建折线图
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],
}
]
}
});