C3: Mengekspor bagan luar biasa ini

Hai,

Grafik C3 adalah grafik terbaik yang tersedia. Saya tidak percaya betapa mudahnya menghasilkan grafik apa pun.

Satu-satunya hal adalah bagaimana cara mengekspor grafik?

Tolong bantu saya dengan hal ini.

Terima kasih.

saya juga mencoba mengekspor grafik ke pdf atau saya ingin mengubahnya menjadi gambar ... jika ada yang punya ide tolong bantu

Tidak mudah melakukannya hanya dengan Javascript, terutama jika Anda ingin mendukung banyak versi browser. Jika browser mendukung kanvas (semua browser modern mendukungnya), ada cara yang agak mudah. Anda dapat menggunakan pustaka canvg (https://code.google.com/p/canvg/), yang mengonversi SVG ke kanvas.
Kemudian sesuatu seperti ini (http://www.nihilogic.dk/labs/canvas2image/) untuk memungkinkan pengguna menyimpannya sebagai file gambar secara lokal. Saya tidak mencobanya sendiri, jadi saya tidak tahu apakah itu bekerja dengan andal dengan grafik C3. Tapi ini adalah arah untuk dijelajahi.

Hai, saya menemukan ini mungkin berguna (http://jsfiddle.net/8ypxW/3/) tetapi saya belum berhasil.
Yang saya coba adalah saya meletakkan grafik C3 (tag div) di dalam kode asli (tag span) tetapi hasil download yang saya dapatkan adalah gambar kosong !!!
Update: http://jsfiddle.net/panubear/mGDt8/ >> Gambar keluaran dibuat tanpa grafik c3.

Saya melakukan ini untuk pembuat bagan berbasis C3 yang sedang saya kerjakan, akan membagikan kode saya setelah selesai. Setuju dengan pendapat @lblb tentang canvg, itulah yang digunakan Quartz di ChartBuilder mereka. Untuk mengetahui cara melakukan ini, selain mengeluarkan PNG, lihat: https://github.com/Quartz/Chartbuilder/blob/master/js/chartbuilder.js#L295

Oke, buat ini berfungsi. Inilah arahan Angular saya Quartz / Chartbuilder . Abaikan semua hal Angular, semua pekerjaan sebenarnya dilakukan di createChartImages() .

Singkatnya, inilah yang perlu saya lakukan:

1. Buat elemen kosong canvas .
2. Ambil semua gaya dari c3.js dan buat sejajar di sebagian besar elemen SVG, berhati-hatilah agar tidak melakukan ini ke objek terkait data Anda (Yang diwarnai melalui atribut gaya CSS. Baris 6 dari c3.css akan ganti warna baris data apa pun yang disetel melalui C3 dengan stroke: #000 dan fill: none .).
3. Temukan elemen apa pun yang memiliki "tersembunyi" untuk properti "visibilitas" CSS dan setel ke "display: none". Ini menyembunyikan semua sumbu C3 yang tidak digunakan.
4. Setel fill: none pada semua jalur data SVG sehingga Anda tidak mendapatkan efek kliping bezier yang aneh.
5. Menggunakan Canvg , buat PNG. Ada juga fungsi untuk menghasilkan SVG dalam arahan saya, menggunakan potongan dari NYT.

Catatan Saya hanya benar-benar menguji ini dengan bagan seri sederhana, sangat mungkin jenis bagan lain akan mengalami masalah dan akan membutuhkan penyesuaian khusus mereka sendiri.

Edit: Tampaknya jenis "area" benar-benar merusak keluaran PNG, meskipun keluaran SVG tampaknya baik-baik saja. Saya telah memperbaikinya sehingga output SVG berfungsi untuk semua jenis grafik, AFAIK.

Edit terbaru: Saya telah memperbarui Intinya, ini seharusnya berfungsi untuk semua jenis bagan sekarang, baik PNG dan SVG. berharap untuk merilis LlamaCharts dalam beberapa hari ke depan jika ada yang menginginkan implementasi yang berfungsi untuk dimainkan.

Hai @dendend

Saya telah bekerja pada eksportir, yang mendukung .png , .jpeg , .gif dan .pdf . silakan lihat permintaan tarik saya

Namun, metode saya adalah implementasi _server-side_ yang bergantung pada phantomjs. Menurut pendapat saya, sebaiknya memiliki eksportir sisi klien juga. Saya ingin melihat versi lengkap Anda

@yuvii Hai! Saya telah merilis proyek saya (mungkin seharusnya memperbarui masalah ini ...), pada times / axisJS .

Anda dapat bermain dengannya secara online di http://times.github.io/axisJS/

PDF sangat berguna, lihat PR Anda. Saya pada akhirnya membutuhkan format cetak untuk axisJS dalam waktu dekat ...

Oh wow, Anda benar-benar melanjutkan dan membuat seluruh GUI untuk ini. Saya baru saja membuat alat baris perintah untuk mengekspor. Sangat keren, bung.

Ini lebih merupakan masalah dukungan pada saat ini daripada apa pun yang menutupnya. Alat CLI @yuvii benar-benar keren dan berguna, jadi mari kita langsung membahas hal ini ke permintaan pull-nya, # 555.

Siapa pun yang tiba di sini, implementasi @gonsakon di sini melakukan apa yang saya lakukan dengan Angular, tetapi dengan jQuery - mungkin contoh yang lebih mudah daripada yang saya berikan!

Hai, Saya mencoba untuk mengubah grafik c3 yaitu SVG menjadi Gambar tetapi tidak berfungsi.
Sepertinya c3.css yang merupakan css eksternal tidak diterapkan.
Bagaimana kita bisa menerapkan css eksternal ke SVG

@ Raj-mehta Silakan bertanya di C3 Google Group , ini adalah masalah tertutup dan kurangnya detail yang Anda berikan dengan pertanyaan Anda membuat hampir tidak mungkin untuk membantu Anda.

Terima kasih atas kepulangan Anda,
Saya menggunakan svg berikut dan digunakan di ur sample.html tetapi bagan di browser dan gambar yang dikonversi dari canvg tidak cocok.

Saya mendapatkan masalah yang sama seperti raj-mehta dengan batang sumbu ekstra lebar. Apakah Anda menemukan solusi untuk ini?

Masalahnya adalah hanya gaya sebaris yang penting saat melakukan ekspor. Saya telah memodifikasi versi lokal c3 saya untuk menyertakan beberapa gaya tambahan (seperti fill-opacity: 0 untuk grafik garis yang menunjukkan latar belakang hitam aneh) dan gambar keluar seperti yang Anda harapkan.

@aendrew tolong beritahu saya sumber dari http://times.github.io/axisJS/#/ saya butuh tutorial ini .. tolong bantu saya

Anda dapat menambahkan fitur ekspor PNG ke grafik c3 menggunakan modul saya: https://github.com/annatomka/ng-c3-export

Hai @annatomka, bisakah saya menggunakan https://github.com/annatomka/ng-c3-export dengan grafik pemuatan asinkron? Kode saya:

app.controller ("ChartController", fungsi ($ http) {
$ http.get ('URL').
sukses (fungsi (data, status, tajuk, konfigurasi) {
c3.generate ({
bindto: "# Bagan-Saya",
data: {
ketik: 'pie',
kolom: [
['sample', 30],
['sample2', 200]
]
}
});
}).
error (fungsi (data, status, header, config) {
debugger;
});

--Menggambar bagan dengan benar tetapi tidak ada ikon unduhan

@annatomka Modul yang bagus, tetapi saya juga mengalami masalah dengan grafik pemuatan asinkron. Tombol unduh menghilang setelah saya membuat ulang grafik.

@annatomka Itu sangat bagus! Saya benar-benar menggunakan modul Anda proyek Angular berikutnya yang saya lakukan!

@annatomka +1

@ morales-franco @johnmarkli Saya telah memperbaiki masalah pemuatan asinkron, Anda dapat mencobanya di versi baru (0.1.5). Saya menambahkan beberapa contoh juga.

@annatomka Bagan pai saya akan keluar

apa yang saya lewatkan di css?

@annatomka Modul yang bagus, tetapi saya juga mengalami masalah dengan browsernya. Ini tidak berfungsi di Internet Explorer modul Anda. Bisakah Anda memperbaiki bug? Terima kasih

Serius di sini, semuanya. Jika Anda mengalami masalah dengan annatomka / ng-c3-export, laporkan di antrean masalah

Mengunci utas.