<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Chart.js</title>
<script src="https://cdn.bootcss.com/Chart.js/2.8.0-rc.1/Chart.bundle.min.js"></script>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<canvas id="myChart"></canvas>
</div>
<script>
let myChart = document.getElementById("myChart").getContext('2d');
// 配置全局默认信息
Chart.defaults.global.defaultFontFamily = 'Lato';
Chart.defaults.global.defaultFontSize = 14;
Chart.defaults.global.defaultFontColor = '#777';
// 实例化Chart对象
let chart = new Chart(myChart,{
type:'bar',
data:{
labels:["北京","深圳","广州","上海","杭州","成都"],
datasets:[{
label:"工作热度值",
data:[617594,432165,632145,325612,453215,236512],
// backgroundColor:"#cc6677",
backgroundColor:[
'rgba(255,99,132,0.6)',
'rgba(54,162,235,0.6)',
'rgba(255,206,86,0.6)',
'rgba(75,192,192,0.6)',
'rgba(153,102,255,0.6)',
'rgba(255,159,64,0.6)'
],
// 添加边框
borderWidth:1,
borderColor:'#777',
hoverBorderWidth:3,
hoverBorderColor:'#000'
}]
},
options:{
title:{
display:true,
text:"中国各大城市工作热度值",
fontSize:25
},
legend:{
display:true,
position:'right',
labels:{
fontColor:'#000'
}
},
layout:{
padding:{
left:50,right:0,top:0,bottom:0
}
}
}
})
</script>
</body>
</html>
柱状图效果展示:
饼状图效果展示: