如何重新启动绘图/动画chartist-js？

Question

有了帮助chartist-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' 
      }, 
     }); 
    } 
}); 

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

Answer 1

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

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