이슈는 아니구 여쭤볼게 있습니다

[parkdonguk]

혹시 차트 영역을 이미지로 저장하는방법이 있을까요?? 챠트내에 기능이 있다면 사용해보고 싶어서요

[easylogic]

@parkdonguk 네 canvas 로 이미지를 그리거나 아니면 그린 이미지를 png 로 출력해주는 기능이 있습니다.

[easylogic]

아래는 이미지 변환하는 방법

1. png 파일을 바로 다운로드

chart.svg.download("jui_image");

2. datauri 로 변환

var data = chart.svg.toDataURI();

3. canvas 객체로 내보내기

svg 로 그리는 객체가 많아서 dom 개수가 많아질 때 정적인 이미지만 필요하면 이걸 사용하시면 성능에 많은 도움이 됩니다.

var canvas = document.createElement('canvas');
var data = chart.svg.exportCanvas(canvas);

4. XML 로 저장하기

var xml = chart.svg.toXML();

[easylogic]

다른 기능이 필요하시면 기본적으로 chart.svg 객체를 이용해서 변환시면 될 것 같습니다.

[parkdonguk]

@easylogic

chart.svg.download("jui_image"); 저혹시 이거를 차트 그리는 스크립트에 넣는건가요?

[easylogic]

@parkdonguk 필요하실때 호출 하시면 됩니다.

예를 들어 다운로드 버튼을 가지고 있다면 아래와 같은 형식으로 맞출 수가 있겠죠.

버튼을 누를 때 다운로드 하겠끔. 단순히 자바스크립트 객체라서 어디서든 쓰시면 됩니다.

$(".download-button").on('click', function () {
     chart.svg.download('jui-image'); 
});

[parkdonguk]

@easylogic 답변감사합니다. 근데.. 에러가 나더라구요 Cannot read property 'download' of undefined라고..

[easylogic]

그럼 chart 만 있고 svg 가 없는건데요. chart.builder 객체 생성하신건가요?

생성하면 무조건 있어야 하는데요. 그거 기반으로 그리는거라.

[parkdonguk]

@easylogic

var chart = jui.include("chart.builder");
var mon   =<?= json_encode($month)?>;
var comp = <?= json_encode($comp)?>;
var data = [];
data = <?= json_encode($data)?>;
var max = <?= json_encode($max)?>;
var min = <?= json_encode($min)?>;
// console.log(data);
// 실제로 객체로 되어야 합니다.   chart 는 chart.builder 클래스라서 
var chartObj = chart("#chartBox", {        
    padding : {
        top : 30,
        bottom : 50
    },

    axis : [{
        x : {
            type : "fullblock",
            domain : mon,
            line : true
        },
        y : {
            type : "range",
            domain : function(d) {

                return [min,max];
            },
            step : 10 ,
            line : true,
        },
        data : data
    }],
    brush : [{
        type : "line",
//      display : "all",
        display : "max",
        target : comp,
        clip: false,
        animate : true
    },{
        type : "scatter",
        target : comp,
        hide : true
    }],
    widget : [{
        type : "title",
        text : " "
    }, {
        type : "legend",
        filter : true
    }, {
        type : "tooltip",
        brush : 1

    }],
    format : function(value) {
        return number_format(value);
    }
});

챠트 그린 소스와 차트 html? 내용입니다.

챠트 그리는 소스 최하단에 chart.svg.download('jui-image'); 를 적어봐두 에러가나고 chart.svg.downloadImage('jui-image','jpg'); 이걸로해봐도 같더라구요.. 어디가 잘못된건지..

[easylogic]

차트 생성 하실 때 변수에 객체를 할당 한 이후에 쓰시면 됩니다. chartObj 로 객체 할당한 이후에. 해보시면 됩니다. (코드에 주석 달아놨습니다.)

chartObj.svg.download('jui-image');  

[parkdonguk]

@easylogic 아! 정말 너무감사합니다! 챠트 공부좀 더 많이 해봐야겠네요 ㅠㅠ

[parkdonguk]

@easylogic 저.. 근데 IE에서는 안되나요?

IE11 쓰고있는데 새창열리더니 data;가 url로 찍히고 있네요

[easylogic]

ie11 에서 제대로 테스트를 못 해봤네요. 먼가 오류가 있는 듯 합니다. ㅠㅠ

[easylogic]

스크립트에서 바로 다운로드를 하는 기법이 a 태그에 .download 라는 속성을 쓰는데요. 이게 ie11 에서는 정상적으로 동작을 안할수도 있겠네요.

[parkdonguk]

@easylogic 음.. ie에서도 되면 좋을텐데..ㅠㅠ

저 그리고 하나더 여쭤볼게 있는데요 이게 이미지로 변환할대보니까 현재 화면에 보여지는 그래프 사이즈로 보여지던데 혹시 사이즈를 임의로 변경시킬수있을까요?

[easylogic]

사이즈를 변경하실려면 차트를 다시 그리셔야 합니다.

[parkdonguk]

@easylogic 그렇군요.. 혹시 이미지 변환할때 사이즈 넘겨주고 그게 가능한지 궁금했어요 ㅎㅎ; 사용자들이 브라우저 창을 작게해서 쓰는경우가 있을거같아서요

[easylogic]

네 그럴때는 가상의 공간에 크게 그리시고 하시면 될 것 같아요. ^^

[parkdonguk]

@easylogic 아 안보이는 화면에 그려놓고 그걸 저장하라는거죠!?

[easylogic]

@parkdonguk 네 맞습니다. 차트 하나 더 그리시는거죠 ^^

[parkdonguk]

@easylogic 저 혹시 IE에서 이미지 다운로드는 작업계획이 있으신가요 ..?