C3: इस अद्भुत चार्ट का निर्यात करना

नमस्ते ,

C3 चार्ट सबसे अच्छा उपलब्ध चार्ट हैं। मुझे विश्वास नहीं हो रहा है कि यह किसी भी चार्ट को कितना आसान बनाता है।

केवल एक चीज यह है कि मैं एक चार्ट कैसे निर्यात करूं?

कृपया इस संबंध में मेरी मदद करें।

धन्यवाद।

मैं भी पीडीएफ को चार्ट निर्यात करने की कोशिश कर रहा हूं या मैं इसे छवि में बदलना चाहता हूं ... अगर किसी को एक विचार है तो कृपया मदद करें

यह पूरी तरह से जावास्क्रिप्ट में करना आसान नहीं है, खासकर यदि आप कई ब्राउज़र संस्करणों का समर्थन करना चाहते हैं। यदि ब्राउज़र कैनवास का समर्थन करता है (सभी आधुनिक ब्राउज़र करते हैं), बल्कि आसान तरीका है। आप canvg (https://code.google.com/p/canvg/) लाइब्रेरी का उपयोग कर सकते हैं, जो SVG को कैनवस में बदल देती है।
फिर कुछ इस तरह (http://www.nihilogic.dk/labs/canvas2image/) उपयोगकर्ता को स्थानीय रूप से छवि फ़ाइल के रूप में सहेजने के लिए। मैंने कोशिश नहीं की कि मैं स्वयं, हालांकि, मैं यह नहीं बता सकता कि यह सी 3 चार्ट के साथ मज़बूती से काम करता है। लेकिन यह पता लगाने की एक दिशा है।

नमस्ते, मुझे लगता है कि यह उपयोगी हो सकता है (http://jsfiddle.net/8ypxW/3/) लेकिन मैं अभी तक सफल नहीं हूं।
मैं जो कोशिश करता हूं वह मूल कोड (स्पैन टैग) के अंदर हमारे सी 3 चार्ट (डिव टैग) डाल देता है लेकिन मुझे जो डाउनलोड परिणाम मिलता है वह खाली छवि है !!!
अद्यतन: http://jsfiddle.net/panubear/mGDt8/ >> c3 चार्ट के बिना आउटपुट छवि का उत्पादन किया गया था।

मैं यह C3- आधारित चार्ट बिल्डर के लिए कर रहा हूं, जिस पर मैं काम कर रहा हूं, एक बार अपना कोड साझा कर लेगा। Canlg के बारे में @lblb की बात से सहमत होकर, यह उनके चार्टब्यूर्ल में क्वार्ट्ज का उपयोग करता है। ऐसा करने के लिए एक विचार के लिए, PNGs के आउटपुट के अलावा, देखें: https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L295

ठीक है, यह काम कर लिया। यहाँ ऐसा करने के लिए मेरा कोणीय निर्देश है , बहुत बेशर्मी से क्वार्ट्ज / चार्टबिल्डर से लिया गया है। सभी कोणीय सामान को अनदेखा करें, सभी वास्तविक कार्य createChartImages() ।

संक्षेप में, यहाँ मुझे क्या करना है:

1. एक खाली canvas तत्व बनाएँ।
2. सभी शैलियों को c3.js से लें और उन्हें अपने अधिकांश एसवीजी तत्वों पर इनलाइन बनाएं, ध्यान रहे कि यह आपके किसी भी डेटा-संबंधित ऑब्जेक्ट (जो CSS शैली विशेषता के माध्यम से रंगीन हैं। c3.css की पंक्ति 6) में नहीं है। C3 के माध्यम से सेट किए गए किसी भी डेटा लाइन रंगों को stroke: #000 और fill: none साथ बदलें।)।
3. सीएसएस "दृश्यता" संपत्ति के लिए "छिपी" किसी भी तत्व को ढूंढें और उन लोगों को "प्रदर्शन: कोई नहीं" सेट करें। यह C3 के सभी अप्रयुक्त कुल्हाड़ियों को छुपाता है।
4. सभी SVG डेटा पथों पर fill: none सेट करें ताकि आपको अजीब बीज़ियर क्लिपिंग प्रभाव न मिले।
5. कैनवग का उपयोग करते हुए, एक पीएनजी उत्पन्न करें। NYT से एक स्निपेट का उपयोग करते हुए मेरे निर्देशन में एक SVG जनरेट करने का एक फंक्शन भी है।

नोट मैंने केवल साधारण श्रृंखला चार्ट के साथ वास्तव में इसका परीक्षण किया है, यह बहुत संभव है कि अन्य चार्ट प्रकार के मुद्दे होंगे और उन्हें अपने स्वयं के विशिष्ट tweaks की आवश्यकता होगी।

संपादित करें: लगता है कि "क्षेत्र" प्रकार PNG आउटपुट को पूरी तरह से तोड़ देते हैं, हालांकि SVG आउटपुट ठीक लगता है। मैंने इसे ठीक कर लिया है इसलिए सभी चार्ट प्रकारों के लिए SVG आउटपुट काम करता है, AFAIK।

नवीनतम संपादन: मैंने जीआईएसटी को अपडेट किया है, यह पीएनजी और एसवीजी दोनों, अब सभी चार्ट प्रकारों के लिए काम करना चाहिए। अगर किसी के साथ काम करने के लिए कोई कार्यान्‍वयन चाहता है तो अगले कुछ दिनों में LlamaCharts को जारी करने की आशा करना।

हाय @aendrew

मैं एक निर्यातक पर काम कर रहा हूं, जो .png , .jpeg , .gif और .pdf । कृपया मेरा पुल अनुरोध यहाँ देखें

हालाँकि, मेरा तरीका एक _server-side_ कार्यान्वयन है जो कि प्रेत पर निर्भर करता है। मेरी राय में एक क्लाइंट-साइड निर्यातक के रूप में भी यह एक अच्छा विचार होगा। मुझे आपका पूरा संस्करण देखना अच्छा लगेगा

@ युवी हाय! मैंने अपनी परियोजना जारी की है (शायद इस मुद्दे को अद्यतन करना चाहिए ...), यह कई बार है / एक्सिस जेएस ।

आप इसके साथ http://times.github.io/axisJS/ पर ऑनलाइन खेल सकते हैं

पीडीएफ सुपर उपयोगी है, अपने पीआर पर एक नज़र डालेंगे। मुझे कुछ समय बाद ही अक्षज के लिए प्रिंट प्रारूप की आवश्यकता है ...

अरे वाह, आप वास्तव में आगे बढ़े और इसके लिए पूरी जीयूआई बनाई। मैंने सिर्फ निर्यात के लिए कमांड लाइन टूल बनाया। बहुत मस्त, यार।

यह इस बिंदु पर इस तरह के एक समर्थन मुद्दे की तुलना में बहुत अधिक है। @ ओयूवीआई का सीएलआई टूल वास्तव में अच्छा और उपयोगी है, तो चलिए इसके बारे में सीधी बातचीत उनके पुल अनुरोध, # 555 पर करते हैं।

इस पर आने वाला कोई भी, @gonsakon का कार्यान्वयन यहाँ वही करता है जो मैंने कोणीय के साथ किया था, लेकिन jQuery के साथ - जो मैंने दिया है उससे आसान उदाहरण हो सकता है!

नमस्ते, मैं c3 चार्ट यानी SVG को इमेज में बदलने की कोशिश कर रहा हूं लेकिन यह काम नहीं कर रहा है।
सी 3 की तरह दिखता है। बाहरी सीएसएस जो लागू नहीं हो रहा है।
हम एसवीजी को बाहरी सीएसएस कैसे लागू कर सकते हैं

@ raj-mehta कृपया C3 Google समूह से पूछें, यह एक बंद मुद्दा है और आपके द्वारा प्रदान की गई विवरण की कमी आपकी मदद करने के लिए व्यावहारिक रूप से असंभव बना देती है।

आपके रिवर्ट के लिए धन्यवाद,
मैं निम्न svg का उपयोग कर रहा हूं और ur नमूना.html पर उपयोग किया जा रहा है लेकिन ब्राउज़र पर चार्ट और कैनवग से परिवर्तित छवि मेल नहीं खाती।

मुझे वही मुद्दा मिल रहा है जो एक्सट्रा वाइड एक्सिस बार के साथ राज-मेहता के रूप में है। क्या आपको इसका हल मिला?

मुद्दा यह है कि निर्यात करते समय केवल इनलाइन शैली मायने रखती है। मैंने कुछ अतिरिक्त स्टाइलिंग (जैसे भरण-अपारदर्शिता: 0 के लिए लाइन ग्राफ़ जो एक अजीब काली पृष्ठभूमि दिखाते हैं) को शामिल करने के लिए c3 के अपने स्थानीय संस्करण को संशोधित किया है और छवि सामने आती है कि आप कैसे उम्मीद करेंगे।

@aendrew कृपया मुझे इस का स्रोत बताएं http://times.github.io/axisJS/#/ मुझे इस ट्यूटोरियल की आवश्यकता है..प्लीज़ मेरी मदद करें

आप मेरे मॉड्यूल का उपयोग करके c3 चार्ट्स में PNG एक्सपोर्ट फीचर जोड़ सकते हैं: https://github.com/annatomka/ng-c3-port

हाय @annatomka क्या मैं https://github.com/annatomka/ng-c3-export whith async का उपयोग कर सकता हूँ? मेरा कोड:

app.controller ("चार्टकंट्रोलर", फ़ंक्शन ($ http) {
$ http.get ('URL')।
सफलता (फ़ंक्शन (डेटा, स्थिति, शीर्षलेख, कॉन्फ़िगरेशन) {
c3.generate ({
bindto: "# मेरा-चार्ट",
डेटा: {
प्रकार: 'पाई',
कॉलम: [
['नमूना', 30],
['नमूना २', २००]
]
}
};
})।
त्रुटि (फ़ंक्शन (डेटा, स्थिति, हेडर, कॉन्फ़िगरेशन) {
डिबगर;
};

- चार्ट को सही ढंग से बताता है लेकिन कोई डाउनलोड आइकन नहीं

@annatomka ग्रेट मॉड्यूल लेकिन मुझे async लोडिंग ग्राफ़ के साथ भी परेशानी हो रही है। एक बार ग्राफ़ को पुन: जेनरेट करने के बाद डाउनलोड बटन गायब हो जाता है।

@ मन्नतोमका इतना अच्छा है! मैं पूरी तरह से अपने मॉड्यूल का उपयोग कर रहा हूँ अगली कोणीय परियोजना जो मैं करता हूँ!

@annatomka +1

@ morales-franco @johnmarkli मैंने async लोडिंग समस्या को ठीक किया, आप इसे नए संस्करण (0.1.5) में आज़मा सकते हैं। मैंने कुछ उदाहरण भी जोड़े।

@annatomka मेरा पाई चार्ट बन रहा है

मैं सीएसएस में क्या याद कर रहा हूँ?

@annatomka ग्रेट मॉड्यूल लेकिन मुझे ब्राउज़रों से भी परेशानी हो रही है। यह इंटरनेट एक्सप्लोरर आपके मॉड्यूल पर काम नहीं करता है। क्या आप बग को ठीक कर सकते हैं? धन्यवाद

गंभीरता से यहाँ, लोग। यदि आपके पास annatomka / ng-c3-export के साथ समस्या है, तो उन्हें annatomka / ng-c3- निर्यात समस्या कतार में रिपोर्ट करें।

ताला बंद करना।