添加
移除
<!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>
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于