Open parkdonguk opened 7 years ago
@parkdonguk 네 canvas 로 이미지를 그리거나 아니면 그린 이미지를 png 로 출력해주는 기능이 있습니다.
아래는 이미지 변환하는 방법
chart.svg.download("jui_image");
var data = chart.svg.toDataURI();
svg 로 그리는 객체가 많아서 dom 개수가 많아질 때 정적인 이미지만 필요하면 이걸 사용하시면 성능에 많은 도움이 됩니다.
var canvas = document.createElement('canvas');
var data = chart.svg.exportCanvas(canvas);
var xml = chart.svg.toXML();
다른 기능이 필요하시면 기본적으로 chart.svg 객체를 이용해서 변환시면 될 것 같습니다.
@easylogic
chart.svg.download("jui_image"); 저혹시 이거를 차트 그리는 스크립트에 넣는건가요?
@parkdonguk 필요하실때 호출 하시면 됩니다.
예를 들어 다운로드 버튼을 가지고 있다면 아래와 같은 형식으로 맞출 수가 있겠죠.
버튼을 누를 때 다운로드 하겠끔. 단순히 자바스크립트 객체라서 어디서든 쓰시면 됩니다.
$(".download-button").on('click', function () {
chart.svg.download('jui-image');
});
@easylogic 답변감사합니다. 근데.. 에러가 나더라구요 Cannot read property 'download' of undefined라고..
그럼 chart 만 있고 svg 가 없는건데요. chart.builder 객체 생성하신건가요?
생성하면 무조건 있어야 하는데요. 그거 기반으로 그리는거라.
@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'); 이걸로해봐도 같더라구요.. 어디가 잘못된건지..
차트 생성 하실 때 변수에 객체를 할당 한 이후에 쓰시면 됩니다. chartObj 로 객체 할당한 이후에. 해보시면 됩니다. (코드에 주석 달아놨습니다.)
chartObj.svg.download('jui-image');
@easylogic 아! 정말 너무감사합니다! 챠트 공부좀 더 많이 해봐야겠네요 ㅠㅠ
@easylogic 저.. 근데 IE에서는 안되나요?
IE11 쓰고있는데 새창열리더니 data;가 url로 찍히고 있네요
ie11 에서 제대로 테스트를 못 해봤네요. 먼가 오류가 있는 듯 합니다. ㅠㅠ
스크립트에서 바로 다운로드를 하는 기법이 a 태그에 .download 라는 속성을 쓰는데요. 이게 ie11 에서는 정상적으로 동작을 안할수도 있겠네요.
@easylogic 음.. ie에서도 되면 좋을텐데..ㅠㅠ
저 그리고 하나더 여쭤볼게 있는데요 이게 이미지로 변환할대보니까 현재 화면에 보여지는 그래프 사이즈로 보여지던데 혹시 사이즈를 임의로 변경시킬수있을까요?
사이즈를 변경하실려면 차트를 다시 그리셔야 합니다.
@easylogic 그렇군요.. 혹시 이미지 변환할때 사이즈 넘겨주고 그게 가능한지 궁금했어요 ㅎㅎ; 사용자들이 브라우저 창을 작게해서 쓰는경우가 있을거같아서요
네 그럴때는 가상의 공간에 크게 그리시고 하시면 될 것 같아요. ^^
@easylogic 아 안보이는 화면에 그려놓고 그걸 저장하라는거죠!?
@parkdonguk 네 맞습니다. 차트 하나 더 그리시는거죠 ^^
@easylogic 저 혹시 IE에서 이미지 다운로드는 작업계획이 있으신가요 ..?
혹시 차트 영역을 이미지로 저장하는방법이 있을까요?? 챠트내에 기능이 있다면 사용해보고 싶어서요