[CreateJS] 애니메이션된 그래프 만들기

소개

CreateJS를 사용한 꺾은선형 그래프 샘플입니다.
실용적이고 표현의 자유도가 높은 그래프를 쓰고 싶다 CreateJS에서 작성했습니다.
Chart.js와 같이 데이터 세트를 읽고 그래프를 그립니다.
자작으로 그래프를 작성하고 싶은 분은 참고에 부디.


[소스 코드]

CreateJS를 만지지 않았다면 먼저 공식에서
htps //w w. c 어서 js. 코m/

사용한 그래프 데이터

Chart.js의 샘플 데이터를 바탕으로,
이러한 형식의 데이터를 읽어 그래프 그리게 하고 있습니다.

// データ設定
var config = {
    data: {
        labels: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
        datasets: [{
            label: 'dataset1',
            backgroundColor: "DarkRed",
            borderColor: "chocolate",
            data: [
                10, 15, 20, 25, 30, 45, 60
            ],
        }, {
            label: 'dataset2',
            fill: false,
            backgroundColor: "olive",
            borderColor: "olivedrab",
            data: [
                10, 40, 80, 160, 160, 240, 280
            ],
        }, {
            label: 'dataset3',
            fill: false,
            backgroundColor: "DarkBlue",
            borderColor: "steelblue",
            data: [
                50, 100, 250, 300, 320, 360, 400
            ],
        }]
    },
};

구축 포인트

여기에서는 그래프를 작성할 때의 포인트를 몇가지 설명합니다.

세로축, 가로축 그리기

    // パディングサイズ 10%
    var padding = 0.1;

    // 軸の基準
    var baseX = stage.canvas.width * padding;
    var baseY = stage.canvas.height * (1.0 - padding);

    // 横軸の描画
    var horizontalLine = new createjs.Shape();
    horizontalLine.x = baseX;
    horizontalLine.y = baseY;
    horizontalLine.graphics
        .beginStroke("gray")
        .moveTo(0, 0)
        .lineTo(stage.canvas.width * (1 - (padding * 2)), 0)
        .endStroke();
    stage.addChild(horizontalLine);

그래프의 X축, Y축의 원점을 결정합니다.
영역의 왼쪽 하단이 원점이 되도록 padding을 고려하여 계산합니다.
축은 가로축이면 왼쪽에서 오른쪽으로 lineTo로 선을 그립니다.

.lineTo(stage.canvas.width * (1 - (padding * 2)), 0)

canvas의 폭으로부터 좌우의 padding량을 뺀 값이 선을 그리는 길이가 됩니다.

데이터 포인트

    // データ点
    for (var key in config.data.datasets) {
        for (var i = 0; i < horizontalLength; i++) {
            // （省略）
            // 点の描画
            var dot = new createjs.Shape();
            dot.graphics.beginFill(config.data.datasets[key].backgroundColor);
            dot.graphics.drawCircle(0, 0, 5);
            dot.x = baseX + (horizontalStep * i);
            dot.y = baseY - (config.data.datasets[key].data[i] * verticalStep / 100);
            dot.dataVal = config.data.datasets[key].data[i];
            stage.addChild(dot);
            // （省略）
        }
    }

데이터를 반복하면서 점을 그립니다.
X축은 캔버스의 너비를 데이터 수로 나눈 값만 이동합니다.
Y축은 캔버스의 높이를 세로축의 레이블 수로 나눈 값만 이동합니다.

데이터 점을 선으로 연결

            // 線の描画
            var stroke = new createjs.Shape();
            stroke.graphics
                .beginStroke(config.data.datasets[key].borderColor)
                .moveTo(0, 0)
                .lineTo(dot.x - prevX, dot.y - prevY)
                .endStroke();
            stroke.x = prevX;
            stroke.y = prevY;
            stage.addChildAt(stroke, 0);

데이터 점을 선으로 연결하려면,
하나의 이전 루프에서 그린 데이터 점의 위치를 ​​유지하고,
그 차이를 계산할 수 있습니다.

Tween의 애니메이션

여기는 양념에 따라 여러가지 애니메이션 시킬 수 있다고 생각합니다.
샘플에서는 그리기 시작 타이밍을 어긋나
흐르도록 선을 그리는 움직임을 실시하고 있습니다.

요약

사이트내에 그래프를 올릴 때의 옵션으로서는,
기성의 라이브러리를 사용하는 것도 좋지만 자유롭게 쓰려고 하면 아무래도 제약이 나와 버립니다.
그 때 CreateJS를 사용하는 것도 하나의 옵션으로 개미라고 생각합니다.