drawing/animation 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

나는 스스로 문제를 해결했다. 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' 
      } 
     }); 
    } 
});