添加
移除
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.contianer{
width:500px;
margin:auto;
display:flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.btn{
width: 50px;
}
#myChart{
display:none;
width:500px;
}
</style>
</head>
<body>
<div id="app" class="contianer">
<button @click="add"class="btn">添加</button>
<button @click="reduce" class="btn">移除</button>
<canvas id="myChart" ></canvas>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.min.js"></script>
<!--<script src="js/vue-chart.js"></script>-->
<script>
var randomScalingFactor = function() {
return Math.round(Math.random() * 100);
};
var getRandomColor = function(){
return '#' +
(function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}
var config = {
type: 'pie',
data: {
datasets: [{
data: [],
backgroundColor: [],
label: 'Dataset 1'
}],
labels: [
// 'red'
]
},
options: {
responsive: true,
backgroundColor: 'rgba(0, 150, 100, 0.9)'
}
};
var app = new Vue({
el: '#app',
data: {
conf:this.config
},
methods:{
add:function(){
var rand=window.randomScalingFactor()
if(this.conf.data.datasets[0].data.length<1){
document.getElementById('myChart').style.display='inline'
}
this.conf.data.datasets[0].data.push(rand)
this.conf.data.datasets[0].backgroundColor.push(window.getRandomColor())
this.conf.data.labels.push(rand)
window.yPie.update()
},
reduce:function(){
this.conf.data.datasets[0].data.pop()
this.conf.data.datasets[0].backgroundColor.pop()
this.conf.data.labels.pop()
window.yPie.update()
if(this.conf.data.datasets[0].data.length<1){
document.getElementById('myChart').style.display='none'
}
}
},
created: function () {}
})
var ctx = document.getElementById('myChart').getContext('2d');
window.yPie = new Chart(ctx, config);
</script>
</body>
</html>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于