在chart.js内转换的重呈现(或动画) deck.js图
在chart.js内转换的重呈现(或动画) deck.js图
提问于 2017-04-10 14:52:31
我制作了一个deck.js幻灯片，其中一个幻灯片中有一个chart.js片段。
我试图让分段动画的每一个时间，它的幻灯片也是转换的。目前，它只在浏览器刷新后第一次转换为动画。
我尝试过添加deck.events.js扩展并使用chart.update()，但它说没有定义图表。如果没有deck.becameCurrent片段，图表就会显示出来，而使用该代码段，console.log就能工作。
如何让deck.event识别图表实例？
在这里，chart.update()是触发初始动画的正确方法吗？
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js'></script>
<script src='{% static "vendor/deckjs/core/deck.core.js" %}'></script>
<script src='{% static "vendor/deckjs/extensions/events/deck.events.js" %}'>
<div class="deck-container">
<section class="slide" id="pie">
<script>
var ctx1 = $("#NestedChart").get(0).getContext("2d");
var myChart1 = new Chart(ctx1, {
type: 'doughnut',
data: {
labels: [1,2,3,4,5],
datasets: [{
data: [10,89,4,34,33],
},
options: {
animation: {
duration:2000
},
});
})
</script>
<div style="position: relative; height: 500px; width:500px" class='col-sm-6'>
<canvas style="position:absolute; top: 0px; left: 0px" id="NestedChart" width="400" height="400"></canvas>
</div>
</section>
</div>
<script>
$(function() {
$.deck('.slide', {countNested: false});
$("#pie").bind('deck.becameCurrent', function(ev, direction) {
console.log("test chart update");
myChart1.update();
});
});
</script>
</body>回答 1
Stack Overflow用户
回答已采纳
发布于 2017-04-11 10:21:00
通过将定义图表的代码移动到becameCurrent事件函数中，我就可以做到这一点：
$(function() {
$.deck('.slide', {countNested: false});
$.deck('showGoTo');
$("#pie").bind('deck.becameCurrent', function(ev, direction) {
const ctx1 = $("#NestedChart").get(0).getContext("2d");
const myChart1 = new Chart(ctx1, {.....这将重新呈现每个过渡的图表。if循环只允许它在前向转换上进行动画。第一次将myChart1变量声明放在任何其他地方初始化图表，但是myChart1.render()或becameCurrent()函数中的myChart1.reset().update()似乎仍然什么也不做。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43326414
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号