C3: تصدير هذا المخطط المذهل

مرحبا ،

الرسوم البيانية C3 هي أفضل الرسوم البيانية المتاحة ، ولا أصدق مدى سهولة إنشاء أي مخطط.

الشيء الوحيد هو كيف يمكنني تصدير مخطط؟

الرجاء مساعدتي في هذا الصدد.

شكر.

أحاول أيضًا تصدير المخطط إلى pdf أو أريد تحويله إلى صورة ... إذا كان لدى أي شخص فكرة ، فيرجى المساعدة

ليس من السهل القيام بذلك في Javascript فقط ، خاصة إذا كنت تريد دعم العديد من إصدارات المتصفح. إذا كان المستعرض يدعم Canvas (جميع المتصفحات الحديثة تفعل ذلك) ، فهناك طريقة سهلة إلى حد ما. يمكنك استخدام مكتبة canvg (https://code.google.com/p/canvg/) ، والتي تحول SVG إلى لوحة الرسم.
ثم شيء من هذا القبيل (http://www.nihilogic.dk/labs/canvas2image/) للسماح للمستخدم بحفظه كملف صورة محليًا. لم أحاول ذلك بنفسي ، لذلك لا يمكنني معرفة ما إذا كان يعمل بشكل موثوق مع مخططات C3. لكن هذا اتجاه للاستكشاف.

مرحبًا ، أجد أن هذا قد يكون مفيدًا (http://jsfiddle.net/8ypxW/3/) لكنني لم أنجح بعد.
ما أحاول أن أضع مخطط C3 الخاص بنا (علامة div) داخل الكود الأصلي (علامة الامتداد) ولكن نتيجة التنزيل التي أحصل عليها هي صورة فارغة !!!
تحديث: http://jsfiddle.net/panubear/mGDt8/ >> تم إنتاج صورة الإخراج بدون مخطط c3.

أنا أفعل هذا لمنشئ الرسوم البيانية المستند إلى C3 الذي أعمل عليه ، وسوف أشارك الكود الخاص بي بمجرد الانتهاء. اتفق معlblb الصورة نقطة عن canvg، وهذا ما استخدام الكوارتز في ChartBuilder بهم. للحصول على فكرة عن كيفية القيام بذلك ، بالإضافة إلى إخراج ملفات PNG ، راجع: https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L295

حسنًا ، حصلت على هذا العمل. هذا هو توجيهي Angular للقيام بذلك ، مأخوذ بشكل كبير من كوارتز / بناء الرسم البياني . تجاهل كل الأشياء الزاويّة ، كل العمل الحقيقي يتم في createChartImages() .

باختصار ، هذا ما يجب أن أفعله:

1. أنشئ عنصر canvas فارغًا.
2. خذ جميع الأنماط من c3.js واجعلها مضمنة في معظم عناصر SVG ، مع الحرص على عدم القيام بذلك مع أي من الكائنات ذات الصلة بالبيانات (والتي يتم تلوينها عبر سمة نمط CSS. السطر 6 من c3.css سوف استبدل أي ألوان خط بيانات تم تعيينها عبر C3 بـ stroke: #000 و fill: none .).
3. ابحث عن أي عناصر بها "مخفية" لخاصية "visibility" في CSS واضبطها على "display: none". هذا يخفي كل محاور C3 غير المستخدمة.
4. قم بتعيين fill: none على جميع مسارات بيانات SVG حتى لا تحصل على تأثير القطع الأكثر غرابة.
5. باستخدام Canvg ،

ملاحظة لقد اختبرت هذا فقط باستخدام مخططات متسلسلة بسيطة ، فمن المحتمل جدًا أن تواجه أنواع المخططات الأخرى مشكلات وستحتاج إلى تعديلات خاصة بها.

تحرير: يبدو أن أنواع "المنطقة" تعطل إخراج PNG تمامًا ، على الرغم من أن إخراج SVG يبدو جيدًا. لقد أصلحته حتى يعمل إخراج SVG مع جميع أنواع المخططات ، AFAIK.

أحدث تعديل: لقد قمت بتحديث Gist ، يجب أن يعمل مع جميع أنواع المخططات الآن ، كل من PNG و SVG. على أمل إصدار LlamaCharts في وقت ما في الأيام القليلة المقبلة إذا كان أي شخص يريد تطبيقًا عمليًا للعب به.

مرحبًا aendrew

لقد كنت أعمل على مصدر يدعم .png و .jpeg و .gif و .pdf . يرجى الاطلاع على طلب السحب الخاص بي

ومع ذلك ، فإن طريقي هو تنفيذ _ جانب الخادم_ يعتمد على phantomjs. في رأيي سيكون من الجيد أن يكون لديك مصدر من جانب العميل أيضًا. أود أن أرى نسختك المكتملة

yuvii مرحبا! لقد أصدرت مشروعي (ربما كان ينبغي أن أقوم بتحديث هذه المشكلة ...) ، إنه في بعض الأحيان / axisJS .

يمكنك اللعب بها عبر الإنترنت على http://times.github.io/axisJS/

PDF مفيد للغاية ، وسوف نلقي نظرة على العلاقات العامة الخاصة بك. أحتاج في النهاية إلى تنسيقات طباعة لـ axisJS في وقت قريب ...

أوه ، لقد تقدمت بالفعل وقمت بإنشاء واجهة مستخدم رسومية كاملة لهذا الغرض. لقد صنعت للتو أداة سطر أوامر للتصدير. رائع جدا يا رجل.

هذه مشكلة دعم في هذه المرحلة أكثر من أي شيء قريب. أداة CLIyuvii رائعة حقًا ومفيدة ، لذلك دعونا نوجه المحادثة حول هذا إلى طلب السحب الخاص به ، # 555.

أي شخص يصل إلى هذا ، فإن تنفيذ هنا يفعل ما فعلته مع Angular ، ولكن مع jQuery - قد يكون مثالًا أسهل من المثال الذي قدمته!

مرحبًا ، أحاول تحويل مخطط c3 ، أي SVG إلى صورة ، لكنه لا يعمل.
يبدو أن c3.css وهو css خارجي لم يتم تطبيقه.
كيف يمكننا تطبيق css الخارجي على SVG

@ raj-mehta من فضلك اسأل على C3 Google Group ، هذه مشكلة مغلقة ونقص التفاصيل التي قدمتها مع استفسارك يجعل من المستحيل عمليًا مساعدتك.

شكرا لعودتك ،
أنا أستخدم ملف svg التالي واستخدمه في ملف ur sample.html لكن الرسم البياني في المتصفح والصورة المحولة من canvg لا يتطابقان.

أواجه نفس المشكلة مثل raj-mehta مع أشرطة المحور العريضة الإضافية. هل وجدت حلا لهذا؟

المشكلة هي أن الأنماط المضمنة فقط هي المهمة عند القيام بالتصدير. لقد قمت بتعديل إصداري المحلي من c3 ليشمل بعض الأنماط الإضافية (مثل عتامة التعبئة: 0 للرسوم البيانية الخطية التي تعرض خلفية سوداء غريبة) وتظهر الصورة بالطريقة التي تتوقعها.

aendrew من فضلك أخبرني بمصدر هذا http://times.github.io/axisJS/#/ أحتاج إلى هذا البرنامج التعليمي .. الرجاء مساعدتي

يمكنك إضافة ميزة تصدير PNG إلى مخططات c3 باستخدام الوحدة النمطية الخاصة بي: https://github.com/annatomka/ng-c3-export

مرحبًا annatomka ، هل يمكنني استخدام https://github.com/annatomka/ng-c3-export أثناء تحميل الرسوم البيانية غير المتزامن؟ رمز بلدي:

app.controller ("ChartController" ، الوظيفة ($ http) {
http.get $ ("URL").
النجاح (الوظيفة (البيانات ، الحالة ، الرؤوس ، التكوين) {
c3.generate ({
bindto: "# My-chart" ،
البيانات: {
اكتب: "فطيرة" ،
الأعمدة: [
["نموذج" ، 30] ،
["نموذج 2"، 200]
]
}
}) ؛
}).
خطأ (الوظيفة (البيانات ، الحالة ، الرؤوس ، التكوين) {
المصحح.
}) ؛

- يرسم المخطط بشكل صحيح ولكن لا يوجد رمز تنزيل

annatomka الوحدة النمطية الكبرى ولكن لدي أيضًا مشكلة في تحميل الرسوم البيانية غير المتزامن. يختفي زر التنزيل بمجرد إعادة إنشاء الرسم البياني.

annatomka هذا جيد جدا! أنا أستخدم مشروع Angular القادم الخاص بك بشكل كامل!

annatomka +1

@ morales-franco johnmarkli لقد أصلحت مشكلة التحميل غير المتزامن ، يمكنك تجربتها في الإصدار الجديد (0.1.5). أضفت بعض الأمثلة أيضًا.

annatomka مخطط

ما الذي افتقده في المغلق؟

annatomka الوحدة النمطية الكبرى ولكني أيضًا أواجه مشكلة في المتصفحات. لا يعمل على Internet Explorer الوحدة النمطية الخاصة بك. هل يمكنك إصلاح الخلل من فضلك؟ شكر

بجدية هنا ، أيها الناس. إذا كانت لديك مشكلات مع annatomka / ng-c3-export ، فأبلغ عنها في

قفل الموضوع.