ProgrammingEcharts

Echarts - 이미지 다운로드 버튼 따로 만들기

Echarts, echart, echart image download button seperately, echart 이미지 다운로드, echart 이미지 다운로드 버튼, echart 이미지 다운로드 버튼 따로 빼기, echart 한글, 이차트, 차트 이미지 다운로드

Echarts 이미지 다운로드 버튼 따로 분리하기

Echarts 에서 제공하는 기본 기능인 이미지 다운로드 기능이 있습니다.

그 기능을 바로 toolbox 안에 saveAsImage 입니다.

1
2
3
4
5
6
7
8
option = {
	... //다른 옵션은 제외 되었습니다.
	toolbox: {
        feature: {
            saveAsImage: {}
        }
    }
}

이차트 옵션에 위와 같이 옵션을 주면 아래와 같이 차트 영역안에 이미지를 다운로드 할수 있는 버튼이 생성됩니다. 기본적으로 차트의 오른쪽 위쪽에 생성됩니다. (아래는 예시 이미지로 실제 작동하지 않습니다. 아래에 그려진 차트에서 실제 작동하는 것을 확인 할 수 있습니다.)

echarts toolbox example

저는 이 기능이 차트 안에서 있는게 아니라 따로 만들어낸 버튼에서 실행하고 싶었습니다.

echarts 다이어그램 자체가 캔버스 요소에 그려져 있으므로 캔버스 개체를 가져 와서 해당 캔버스 정보를 주소로 변환 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//버튼 생성
<button name="button" onclick="getChartImg()">차트 이미지 다운로드</button>

//버튼을 클릭했을때 실행될 함수를 만듭니다.
function getChartImg(){

    //캔버스의 정보를 가져옵니다.
    let canvas = document.getElementsByTagName("canvas");

    if(canvas&&canvas.length>0){
        //레이블 생성
        let tempA = document.createElement("a");
        //다운로드될 이름 생성
        tempA.download = "echarts download" +".png";
        //address 설정하고 파일의 타입 정하기
        tempA.href = canvas[0].toDataURL("image/png");
        document.body.appendChild(tempA);
        //클릭 다운로드 이벤트
        tempA.click();
        //태그를 제거합니다
        tempA.remove();
    }
}

아래의 버튼을 누르면 차트를 이미지로 다운 받을 수 있습니다.

Reference

Share