C3: 이 놀라운 차트 내보내기

안녕하세요 ,

C3 차트는 사용 가능한 최고의 차트입니다. 차트를 생성하는 것이 얼마나 쉬운 지 믿을 수 없습니다.

유일한 것은 차트를 내보내는 방법입니다.

이와 관련하여 저를 도와주세요.

감사.

차트를 pdf로 내보내려고하거나 이미지로 변환하고 싶습니다 ... 누군가 아이디어가 있으면 도와주세요

특히 많은 브라우저 버전을 지원하려는 경우 Javascript로만하는 것은 쉽지 않습니다. 브라우저가 캔버스를 지원하는 경우 (모든 최신 브라우저가 지원함) 비교적 쉬운 방법이 있습니다. SVG를 캔버스로 변환하는 canvg (https://code.google.com/p/canvg/) 라이브러리를 사용할 수 있습니다.
그런 다음 (http://www.nihilogic.dk/labs/canvas2image/)와 같이 사용자가 로컬에 이미지 파일로 저장할 수 있습니다. 그래도 직접 시도하지 않았기 때문에 C3 차트에서 안정적으로 작동하는지 알 수 없습니다. 그러나 이것은 탐구 할 방향입니다.

안녕하세요, 유용 할 수도 있지만 (http://jsfiddle.net/8ypxW/3/) 아직 성공하지 못했습니다.
내가 시도한 것은 원래 코드 (span 태그) 안에 C3 차트 (div 태그)를 넣었지만 다운로드 결과는 빈 이미지입니다 !!!
업데이트 : http://jsfiddle.net/panubear/mGDt8/ >> 출력 이미지는 c3 차트없이 생성되었습니다.

작업중인 C3 기반 차트 빌더를 위해이 작업을 수행하고 있으며 완료되면 코드를 공유 할 것입니다. canvg 에 대한 @lblb의 요점에 동의하면 Quartz가 ChartBuilder에서 사용하는 것입니다. 이를 수행하는 방법과 PNG를 출력하는 방법에 대한 아이디어는 https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L295를 참조하십시오.

좋아요, 작동하게되었습니다. 다음은 Quartz / Chartbuilder 에서 뻔뻔하게 가져온 Angular 지시문입니다 . 모든 Angular 항목을 무시하고 모든 실제 작업은 createChartImages() 에서 수행됩니다.

요컨대 내가해야 할 일은 다음과 같습니다.

1. 빈 canvas 요소를 만듭니다.
2. c3.js의 모든 스타일을 가져와 대부분의 SVG 요소에서 인라인으로 만듭니다. 데이터 관련 객체 (CSS 스타일 속성을 통해 색상이 지정되는 객체)에이 작업을 수행하지 않도록주의합니다. c3.css의 6 행은 다음과 같습니다. C3를 통해 설정된 데이터 라인 색상을 stroke: #000 및 fill: none .)
3. CSS "visibility"속성에 대해 "hidden"이있는 요소를 찾아 "display : none"으로 설정합니다. 이것은 C3의 사용되지 않은 모든 축을 숨 깁니다.
4. 모든 SVG 데이터 경로에 fill: none 를 설정하여 이상한 베 지어 클리핑 효과를 얻지 않도록합니다.
5. Canvg 를 사용하여 PNG를 생성합니다. NYT의 스 니펫을 사용하여 내 지시문에 SVG를 생성하는 기능도 있습니다.

참고 저는 단순한 시리즈 차트로만 이것을 테스트했습니다. 다른 차트 유형에 문제가있을 가능성이 매우 높으며 고유 한 조정이 필요할 것입니다.

편집 : SVG 출력이 괜찮아 보이지만 "영역"유형이 PNG 출력을 완전히 깨뜨리는 것 같습니다. SVG 출력이 모든 차트 유형, AFAIK에서 작동하도록 수정했습니다.

최신 편집 : Gist를 업데이트했습니다. 이제 PNG와 SVG를 포함한 모든 차트 유형에서 작동합니다. 누군가가 함께 작동하는 구현을 원하는 경우 다음 며칠 내에 언젠가 LlamaCharts를 출시하기를 희망합니다.

안녕하세요 @aendrew

저는 .png , .jpeg , .gif 및 .pdf 를 지원하는 내보내기 작업을 해왔습니다. 여기에서 내 하십시오

그러나 내 방법은 phantomjs에 의존하는 _server-side_ 구현입니다. 제 생각에는 클라이언트 쪽 내보내기도있는 것이 좋습니다. 완성 된 버전을보고 싶습니다

@yuvii 안녕하세요! 내 프로젝트를 출시했습니다 (아마이 문제를 업데이트했을 것입니다 ...), times / axisJS에 있습니다.

http://times.github.io/axisJS/ 에서 온라인으로 재생할 수 있습니다.

PDF는 매우 유용하며 PR을 살펴볼 것입니다. 언젠가는 궁극적으로 axisJS에 대한 인쇄 형식이 필요합니다 ...

오 와우, 당신은 실제로 이것을 위해 전체 GUI를 만들었습니다. 방금 내보내기위한 명령 줄 도구를 만들었습니다. 아주 멋지다.

이것은 종결되는 것보다이 시점에서 지원 문제에 가깝습니다. @yuvii 의 CLI 도구는 정말 멋지고 유용합니다. 이에 대해 그의 pull request, # 555에 직접 대화 해 보겠습니다.

여기에 도착하는 사람은 @gonsakon 의 구현이 Angular로 수행 한 작업을 수행하지만 jQuery를 사용하면 내가 제공 한 것보다 더 쉬운 예제 일 수 있습니다!

안녕, 나는 c3 차트, 즉 SVG를 이미지로 변환하려고하지만 작동하지 않습니다.
외부 CSS 인 c3.css가 적용되지 않는 것 같습니다.
SVG에 외부 CSS를 어떻게 적용 할 수 있습니까?

@ raj-mehta C3 Google 그룹 에 문의하세요.이 문제는 닫힌 문제이며 질문에 대한 세부 정보가 부족하여 실질적으로 도움을 줄 수 없습니다.

되돌려 주셔서 감사합니다.
다음 svg를 사용하고 ur sample.html에서 사용했지만 브라우저의 차트와 canvg에서 변환 된 이미지가 일치하지 않습니다.

여분의 넓은 축 막대가있는 raj-mehta와 동일한 문제가 발생합니다. 이것에 대한 해결책을 찾았습니까?

문제는 내보낼 때 인라인 스타일 만 중요하다는 것입니다. 추가 스타일 (예 : 이상한 검은 색 배경을 표시하는 선 그래프의 경우 fill-opacity : 0)을 포함하도록 로컬 버전의 c3를 수정했으며 이미지가 예상대로 나옵니다.

@aendrew 이 http://times.github.io/axisJS/#/ 이 튜토리얼이 필요합니다.

내 모듈을 사용하여 c3 차트에 PNG 내보내기 기능을 추가 할 수 있습니다. https://github.com/annatomka/ng-c3-export

안녕하세요 @annatomka https://github.com/annatomka/ng-c3-export whith 비동기로드 그래프를 사용할 수 있습니까? 내 코드 :

app.controller ( "ChartController", function ($ http) {
$ http.get ( 'URL').
success (function (data, status, headers, config) {
c3.generate ({
bindto : "# 내 차트",
데이터 : {
유형 : '파이',
열 : [
[ '샘플', 30],
[ '샘플 2', 200]
]
}
});
}).
error (function (data, status, headers, config) {
디버거;
});

-차트를 올바르게 그리지 만 다운로드 아이콘이 없습니다.

@annatomka 훌륭한 모듈이지만 비동기 로딩 그래프에도 문제가 있습니다. 그래프를 다시 생성하면 다운로드 버튼이 사라집니다.

@annatomka 너무 좋아요! 나는 당신의 모듈을 다음 Angular 프로젝트에서 사용하고 있습니다!

@annatomka +1

@ morales-franco @johnmarkli 비동기 로딩 문제를 수정했습니다. 새 버전 (0.1.5)에서 시도해 볼 수 있습니다. 몇 가지 예도 추가했습니다.

@annatomka 내 원형 차트가 나옵니다.

CSS에서 내가 무엇을 놓치고 있습니까?

@annatomka 훌륭한 모듈이지만 브라우저에도 문제가 있습니다. Internet Explorer에서 모듈이 작동하지 않습니다. 버그를 고칠 수 있습니까? 감사

여기 진심으로 여러분. annatomka / ng-c3-export에 문제가 있는 경우

잠금 스레드.