juijs / jui-chart

SVG-based JUI chart that can be used in the browser and Node.js. Support many types of charts. (Dashboard, Map, Topology, Full 3D, Realtime)
https://codepen.io/collection/nLydod/
57 stars 25 forks source link

동적으로 width값 설정방법이 궁금합니다. #167

Open nahongtack opened 6 years ago

nahongtack commented 6 years ago

안녕하세요.

차트를 감사히 사용하고 있습니다.

동적으로 width값 설정방법이 궁금합니다.

아래에 width 값을 pdf로 출력할때는 45%로 설정하고싶고 이미지로 출력할땐 100%로 설정하고싶은데요

width값 접근방법이 궁금합니다.

var chartObj = chart("#chartDown", {
    padding : {
        top : 30,
        bottom : 70
    },

//  width : '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);
    }

});
easylogic commented 6 years ago

이런 경우는 보통 상위 div에서 width를 설정하시고 아래 차트는 100% 로 두시는게 좋을 것 같습니다

seogi1004 commented 6 years ago

chartObj.setSize(width, height);로 할 수 있습니다.

nahongtack commented 6 years ago

감사합니다

chartObj.setSize(width, height); 요걸로 잘 처리했습니다 ^^

그리고 어느 게시물에서 svg.downloadImage 처리하는걸 본적이있는데

이미지로 다운로드 시 이미지에 그래프 위치를 정할수 있는지 알고싶습니다.

default

요렇게 다운로드 했을때 상단 오른쪽에 그래프가 자리하더라구요..

easylogic commented 6 years ago

차트가 그려지는 영역 그대로 이미지화 시키는 것이라 svg 가 그려지는 영역이 어떻게 되는지 한번 봐주세요