차트 데이터를 업데이트 할 때의 Chart.js 애니메이션

현재 Chart.js로 작업 중이며 두 개의 다른 데이터 세트간에 변경해야합니다. 이렇게하려면 데이터 집합을 변경하고 업데이트 기능을 사용하면됩니다. 주요 문제점은 데이터 세트간에 여러 번 변경하면 애니메이션이 사라지고 끔찍한 것처럼 보입니다.차트 데이터를 업데이트 할 때의 Chart.js 애니메이션

Here 당신은 내가 말하는 것과 내 코드를 볼 수 있습니다. 누군가 내가 어떻게 고칠 수 있는지 알고 있습니까? 감사합니다.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="utf-8" /> 
    <title>Chart.js Example</title> 
    <!-- import plugin script --> 
    <script src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.min.js'></script> 
    </head> 
    <body> 
    <!-- bar chart canvas element --> 
    <canvas id="chart" width="600" height="400"></canvas> 
    <button onclick="manageCharts()" id="chartDataButton">Chart 2</button> 
</body> 
</html>

그리고

Chart.defaults.global.responsive = false; 

    var chartData1 = { 
    labels : ["L1", "l2", "l3", "l4"], 
    datasets : [{ 
     label: "LEGEND", 
     data : [13, 23, 9, 4], 
     backgroundColor: "#FF88CC", 
     borderColor: "#000000", 
     borderWidth: 1, 
    }] 
    } 

    var chartData2 = { 
    labels : ["L11", "L12"], 
    datasets : [{ 
     label: '{{ legend }}', 
     data : [7, 1], 
     backgroundColor: "#FEFE65", 
     borderColor: "#00FFFF", 
     borderWidth: 2, 
    }] 
    } 

    var pieChartOptions = { 
    rotation: -Math.PI, 
    cutoutPercentage: 30, 
    circumference: Math.PI, 
    legend: { 
     position: 'left' 
    }, 
    animation: { 
     animateRotate: true, 
     animateScale: false 
    } 
    }; 

    // get chart canvas 
    var ctx = document.getElementById("chart").getContext("2d"); 

    var pieChart = new Chart(ctx, { 
    type: 'pie', 
    data: chartData1, 
    options: pieChartOptions 
    }); 

    function manageCharts(){ 
    var button = document.getElementById("chartDataButton"); 
    var previousData = pieChart.config.data; 

    if(previousData == chartData1){ 
     button.textContent = "Chart 1"; 
     showChart2Data(); 
    }else if(previousData == chartData2){ 
     button.textContent = "Chart 2"; 
     showChart1Data(); 
    } 
    } 

    function showChart2Data(){ 
    pieChart.config.data = chartData2; 
    pieChart.update(); 
    }; 

    function showChart1Data(){ 
    pieChart.config.data = chartData1; 
    pieChart.update(); 
    };

출처

2017-09-17 Javierd98

자, 제발 도와 주시겠습니까? @ – Javierd98

내가 destroy() 기능을 사용 this jsfiddle에 코드를 업데이트 한 자바 스크립트 코드를 여기

그리고

는 경우 링크가 작동하지 않는, 내 코드입니다 .

update()을 사용하면 애니메이션이 재설정되지 않는 것 같습니다. destroy()를 사용

차트를 제거하고 다음 코드는 새 차트 (애니메이션)

PS 다시 것입니다 : JS 빈에서 jsfiddle을 변경 죄송합니다. JS Bin에서 편집하는 데 문제가있었습니다.

출처

2017-10-10 06:12:33 tyelford

차트 데이터를 업데이트 할 때의 Chart.js 애니메이션

답변

관련 문제