如何重新启动绘图/动画chart -js
How I can restart drawing/animation chartist-js?
使用help chart -js我创建了一个图表。我想再次开始绘制(动画)图形。怎么做呢?我的代码创建和动画图形:
var chart = new Chartist.Line('#savings_calculator .graph', {
series: [
[1, 1.6, 2.8, 2.7, 3.1, 3.4, 3.8, 4.5, 5.7, 5.6, 7.5, 9.5]
]
}, {
axisX: {
showLabel: false,
showGrid: false
},
axisY: {
showLabel: false,
showGrid: false
},
lineSmooth: false,
low: 0
});
// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0,
delays = 100,
durations = 10;
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
chart.on('draw', function (data) {
seq++;
if (data.type === 'line') {
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
data.element.animate({
opacity: {
// The delay when we like to start the animation
begin: seq * delays + 0,
// Duration of the animation
dur: durations,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
}
});
} else if (data.type === 'point') {
data.element.animate({
x1: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
x2: {
begin: seq * delays,
dur: durations,
from: data.x - 10,
to: data.x,
easing: 'easeOutQuart'
},
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
},
});
}
});
此代码仅包含创建图形的原始代码。没有代码,我试图重新绘制图形。
我自己解决了一个问题。Little重写了代码,将其封装在一个函数中,并在必要时再次运行它。
var chart = new Chartist.Line('#savings_calculator .graph', {
series: [
[1, 1.6, null, null, null, null, null, null, null, null, null, null],
[null, 1.6, 2.8, null, null, null, null, null, null, null, null, null],
[null, null, 2.8, 2.7, null, null, null, null, null, null, null, null],
[null, null, null, 2.7, 3.1, null, null, null, null, null, null, null],
[null, null, null, null, 3.1, 3.4, null, null, null, null, null, null],
[null, null, null, null, null, 3.4, 3.8, null, null, null, null, null],
[null, null, null, null, null, null, 3.8, 4.5, null, null, null, null],
[null, null, null, null, null, null, null, 4.5, 5.7, null, null, null],
[null, null, null, null, null, null, null, null, 5.7, 5.6, null, null],
[null, null, null, null, null, null, null, null, null, 5.6, 7.5, null],
[null, null, null, null, null, null, null, null, null, null, 7.5, 9.5]
]
}, {
axisX: {
showLabel: false,
showGrid: false
},
axisY: {
showLabel: false,
showGrid: false
},
lineSmooth: false,
low: 0
});
// Let's put a sequence number aside so we can use it in the event callbacks
var seq = 0,
delays = 100,
durations = 1;
// On each drawn element by Chartist we use the Chartist.Svg API to trigger SMIL animations
chart.on('draw', function (data) {
seq++;
if (data.type === 'line') {
// If the drawn element is a line we do a simple opacity fade in. This could also be achieved using CSS3 animations.
data.element.animate({
opacity: {
// The delay when we like to start the animation
begin: seq * delays - delays,
// Duration of the animation
dur: durations,
// The value where the animation should start
from: 0,
// The value where it should end
to: 1
}
});
} else if (data.type === 'point') {
data.element.animate({
opacity: {
begin: seq * delays,
dur: durations,
from: 0,
to: 1,
easing: 'easeOutQuart'
}
});
}
});
相关文章:
- 如何设置html元素填充的动画
- 如何使用动画实现纸张推车
- 如何在生成下载文件时显示加载动画
- 剑道网格jQuery动画()问题
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 在自定义mean.io包中使用angular-chart.js作为依赖项
- jQuery Lazy加载动画滚动
- jquery动画可以通过编程链接吗
- Javascript将数学动画化
- 动画.CSS重播
- 制作一个不带HTML a标记但在动画播放完毕后指向其他页面的超链接
- 如何使用jQuery在动画中期加速动画
- 更改使用Chart.js创建的图表中的轴线颜色
- 使用数据上的角度更改设置集合的第一个元素的动画
- Chart.js 2.1.2条形图动画问题
- 如果动画设置为false,则Chart.js不会在Android Webview上显示
- 延迟chart.js的动画
- 动画Chart.JS只一次
- Chart.js 2.x动画onComplete没有响应
- 如何重新启动绘图/动画chart -js