<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>如何绘制柱状图</title>
<script src="https://cdn.bootcss.com/Chart.js/2.5.0/Chart.js"></script>
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="app">
<canvas id="myChart"></canvas>
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
score : '60'
},
methods:{
draw(){
var ctx = document.getElementById("myChart").getContext("2d");
var chart = new Chart(ctx, {
type: 'bar', //形状
data: {
xLabels: ["我的得分"],
datasets: [{
backgroundColor: [
'rgba(190, 230, 253, 0.2)',
],
borderColor: [
'#16A085',
],
borderWidth: 1,
data: [this.score],
}]
},
options: {
legend: {
display: false
},
scales : {
xAxes:[{
barPercentage:0.2,//设置单个柱宽度
//x轴字体大小
ticks:{
fontSize:14,
fontColor : '#666'
}
}],
yAxes : [{
stacked : true,
ticks: {
min: 0,
stepSize: 15,
max: 100,
callback: function(value, index, values) {
if(value == 0 || value == 45){
value = '正常';
}else if(value == 15 || value == 30){
value = '';
}else if(value == 60){
value = '轻度';
}else if(value == 75){
value = '中度';
}else if(value == 90){
value = '';
}else if(value == 100){
value = '重度';
}
return value;
}
},
}]
}
}
});
}
},
mounted(){
this.$nextTick(()=>{
this.draw();
})
}
});
</script>
</body>
</html>
chart.js自定义图表之柱状图
最新推荐文章于 2023-09-17 00:49:24 发布