Javascript 如何重新启动绘图/动画图表列表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'
            },
        });
    }
});

---

此代码仅包含创建图形的原始代码。我没有试图重新绘制图表的代码。

我自己解决了一个问题。很少重写代码，将其封装在函数中，并在必要时再次运行

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'
            }
        });
    }
});

---

我自己解决了一个问题。很少重写代码，将其封装在函数中，并在必要时再次运行

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'
            }
        });
    }
});

---

opacity.to

的值是否可能大于1？假设您的序列的进展值为9.5？，那么

opacity.to

的值是否可能大于1？考虑到你的系列进展到9.5的值？