如何重新啓動繪圖/動畫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' 
      } 
     }); 
    } 
});