Chartjs x 축 애니메이션

Question

Chartjs 선형 차트를 사용하여 데이터 포인트를 시각화하고 싶습니다. Chartjs은 기본적으로 그래프에 애니메이션을 적용하는 것처럼 보이지만 X 축의 값에는 애니메이션이 적용되지 않습니다. x 축은 개별 단계로 이동합니다.

축에서 애니메이션을 활성화 할 수있는 방법이 있습니까?

감사합니다.

Answer 1

내가 아는 한, ChartJS는 밖으로의 상자 x 축 애니메이션을 지원하지 않습니다. 그래서 당신은 그것을 해킹해야합니다. 이 작업을 수행하는 데는 여러 가지 방법이 있지만 다음과 같은 방법이 효과적입니다. 당신은 차트가 업데이트되는 X 축

의 데이터를 애니메이션을 적용 할 경우

, 다음 단계가 발생합니다 : 1) 축이 draw() 함수가 호출되어) 다음 2를 그려하고있다 데이터를 그립니다. 서로 다른 차트 유형에 대해 서로 다른 draw() 함수가 있으며 꺾은 선형 차트 함수는 Chart.controllers.line.prototype.draw입니다. draw() 함수는 하나의 인수를 취합니다.이 인수는 animationFraction이라고하며, 애니메이션의 분수를 나타냅니다. 예를 들어 애니메이션이 5 % 완료되면 animationFraction은 0.05이고 애니메이션이 100 % 완료되면 (차트가 최종 형식 인 경우) animationFraction=1입니다. draw() 함수는 애니메이션의 각 단계에서 데이터 표시를 업데이트하기 위해 호출됩니다. 그 X 축을 애니메이트

한 해킹이다 원숭이 패치마다의 수평 치수 캔버스를 변환하는 선 차트를 draw() 기능 단계 그린다

var hShift = (1-animationFraction)*ctx.canvas.width; 

hShift 픽셀의 수평 이동이고 차트의 위에서 정의한대로 데이터는 오른쪽에서 스윕됩니다. 왼쪽에서 쓸어 버리려면 위의 사항을 부정적으로 만들 수 있습니다. 그런 다음, hShift를 사용하여 캔버스를 변환, 캔버스 컨텍스트 상태를 저장 차트 데이터를 그릴, 다음 애니메이션에 그 축 프레임 있도록 다음 올바른 자리에 그려집니다 원래 상태로 캔버스를 복원

ctx.save(); 
ctx.setTransform(1, 0, 0, 1, hShift, 0); 
ctx.oldDraw.call(this, animationFraction); 
ctx.restore(); 

위에서

는 this 차트 객체를 참조하고, oldDraw 이전에 저장된 원래 라인 차트 그리기 함수를 참조 :

var oldDraw = Chart.controllers.line.prototype.draw; 

할 수 있습니다 추가로 설치 할 수 새로운 애니메이션 옵션을 읽을 수있는 새로운 draw() 기능 너 wheeth 설정하려면 어 x 축과 y 축이 애니메이션됩니다

var oldDraw = Chart.controllers.line.prototype.draw; 
Chart.controllers.line.prototype.draw = function(animationFraction) { 
    var animationConfig = this.chart.options.animation; 
    if (animationConfig.xAxis === true) { 
     var ctx = this.chart.chart.ctx; 
     var hShift = (1-animationFraction)*ctx.canvas.width; 
     ctx.save(); 
     ctx.setTransform(1, 0, 0, 1, hShift,0); 
     if (animationConfig.yAxis === true) { 
      oldDraw.call(this, animationFraction); 
     } else { 
      oldDraw.call(this, 1); 
     } 
     ctx.restore(); 
    } else if (animationConfig.yAxis === true) { 
     oldDraw.call(this, animationFraction); 
    } else { 
     oldDraw.call(this, 1); 
    } 
} 

당신은 다음과 애니메이션 두 축이 선형 차트를 만들 수 있습니다

var lineChart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: { 
     animation: { 
      duration: 5000, 
      xAxis: true, 
      yAxis: true, 
     } 
    } 
}); 

이 데모 https://jsfiddle.net/16L8sk2p/를 참조하십시오.

당신은 x 축 한계를 애니메이션을 적용 할 경우 X 축이

를 제한 애니메이션을 적용 할 경우 - 즉. 데이터, 축 틱 및 눈금 레이블을 이동하면 다음 전략을 사용할 수 있습니다. 다소 기발한 것이기 때문에 특정 유스 케이스의 꼬임을 해결하기 위해 약간의 노력이 필요할 수도 있지만 일반적으로 작동해야한다고 생각합니다. 먼저 선 그림을 산점도로 변환해야합니다. 꺾은 선형 차트에는 단계별로 이동하는 범주 형 x 축이 있으므로 애니메이션을 가져 오기 위해 수행해야하는 축 제한을 틱 사이로 설정할 수 없습니다. 분산 형 플롯은 임의의 축 제한을 가질 수 있으므로 대신 선 분산 형 플롯을 사용해야합니다. 각 데이터 요소의 번호를 매기고 해당 번호를 해당 데이터 요소의 x 값에 할당하면됩니다. 예를 들어, 임의의 데이터 세트를 생성하는, 당신이 할 수 있습니다 :

var DATA_POINT_NUM = 58; 
var data = { 
    labels: [], 
    datasets: [ 
     { 
      data: [], 
     }, 
    ] 
} 
for (var i=0; i<DATA_POINT_NUM; i++) { 
    data.datasets[0].data.push({ x: i, 
            y: Math.random()*10 
           }); 
    data.labels.push(String.fromCharCode(65+i)); 
} 

당신은 다음 데이터 포인트의 할당 x 값, 데이터 요소 레이블 사이의 변환 함수를 작성해야합니다 (즉, 차트 x 축에있는 카테고리) :

function getXAxisLabel(value) { 
    try { 
     var xMin = lineChart.options.scales.xAxes[0].ticks.min; 
    } catch(e) { 
     var xMin = undefined; 
    } 
    if (xMin === value) { 
     return ''; 
    } else { 
     return data.labels[value]; 
    } 
} 

여기서 lineChart는 아래 정의되는 Chart 개체입니다. ChartJS는 x 축의 최소값에 레이블이 있으면 차트를 약간 다르게 그립니다. 따라서 값이 == x 축의 최소값이면 빈 문자열을 반환하려면이 함수를 작성해야합니다. 그런 다음 차트 개체를 정의 할 수 있습니다 :

var lineChart = new Chart(ctx, { 
    type: 'line', 
    data: data, 
    options: { 
     animation: false, 
     scales: { 
      xAxes: [{ 
       type: 'linear', 
       position: 'bottom', 
       ticks: { 
        min: 0, 
        max: 10, 
        callback: getXAxisLabel, // function(value) { return data.labels[value]; }, 
        autoSkip: false, 
        maxRotation: 0, 

       }, 
      }] 
     } 
    } 
}); 

ticks.callback은 위의 getXAxisLabel 기능으로 설정되어 있습니다. ChartJS가 x 축을 그릴 때, 데이터 포인트의 x 값을 콜백 함수에 전달한 다음 결과 문자열을 x 축의 값으로 사용합니다. 이 방법으로 꺾은 선형 차트와 같은 분산 형 차트를 그릴 수 있습니다. 또한 autoSkip=false 및 maxRotation=0을 설정하여 축 레이블이 일관된 방식으로 그려 지도록하십시오.

그런 다음 x 축 ticks.min 및 ticks.max 값을 조정하고 차트의 .update() 메서드를 호출하여 차트에 애니메이션을 적용 할 수 있습니다. 이를 설명하기 위해 아래 코드는 한 번에 10 개의 데이터 요소를 보여주는 차트 x 축을 따라 스캔합니다.

var xMin = 0;     // Starting minimum value for the x-axis 
var xLength = 10;    // Length of the x-axis 
var animationDuration = 5000; // Duration of animation in ms 

// Calculate animation properties 
var framesPerSec = 100; 
var frameTime = 1000/framesPerSec; 
var xStep = (DATA_POINT_NUM-xMin+xLength)/(animationDuration/1000*framesPerSec); 

function nextFrame() { 
    var xMax = xMin+xLength; 
    if (xMax < DATA_POINT_NUM-1) { 

     if (xMax+xStep > DATA_POINT_NUM-1) { 
      xMax = DATA_POINT_NUM-1; 
      xMin = xMax-xLength; 
     } 
     lineChart.options.scales.xAxes[0].ticks.min = xMin; 
     lineChart.options.scales.xAxes[0].ticks.max = xMax; 
     lineChart.update(); 
     setTimeout(nextFrame, frameTime); 
     xMin += 0.1; 
    } 
} 

nextFrame(); 

모두 함께 퍼팅 : https://jsfiddle.net/qLhojncy/ 당신이 또는 x 축에 레이블을 애니메이션을 의미하는 경우, CTG 아래하신 것처럼 X-차원 그래프 데이터를 애니메이션에 대해 물어되었는지는 분명하지 않다

Answer 2

나는 JavaScript 전문가가 아니지만 새로운 데이터 포인트를 삽입하면 애니메이션을 통해 X 축을 업데이트하는 Chartjs의 예제를 발견했습니다. example.

예제 소스 : sitepoint.com