C3: この素晴らしいチャートをエクスポートする

こんにちは 、

C3チャートは、入手可能な最高のチャートです。チャートを生成するのがどれほど簡単か信じられません。

唯一のことは、チャートをエクスポートするにはどうすればよいですか？

この点で私を助けてください。

ありがとう。

チャートをPDFにエクスポートしようとしている、または画像に変換したい...誰かアイデアがあれば助けてください

特に多くのブラウザバージョンをサポートしたい場合は、Javascriptだけで行うのはそれほど簡単ではありません。 ブラウザがキャンバスをサポートしている場合（最近のすべてのブラウザはサポートしています）、かなり簡単な方法があります。 SVGをキャンバスに変換するcanvg（https://code.google.com/p/canvg/）ライブラリを使用できます。
次に、このようなもの（http://www.nihilogic.dk/labs/canvas2image/）を使用して、ユーザーが画像ファイルとしてローカルに保存できるようにします。 私はそれを自分で試していなかったので、C3チャートで確実に機能するかどうかはわかりません。 しかし、これは探求する方向です。

こんにちは、私はこれが役に立つかもしれないと思います（http://jsfiddle.net/8ypxW/3/）が、私はまだ成功していません。
私が試しているのは、C3チャート（divタグ）を元のコード（spanタグ）の中に入れていますが、ダウンロード結果は空の画像です!!!
更新：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から恥知らずに取ったもの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出力は問題ないように見えますが、「area」タイプはPNG出力を完全に壊しているようです。 SVG出力がすべてのチャートタイプ、AFAIKで機能するように修正しました。

最新の編集：要点を更新しました。PNGとSVGの両方のすべてのグラフタイプで機能するはずです。 誰かが実用的な実装を試してみたい場合は、数日中にLlamaChartsをリリースすることを望んでいます。

こんにちは@aendrew

私は.png 、 .jpeg 、 .gif 、 .pdfをサポートするエクスポーターに取り組んでいます。 こちらのプルリクエストをご覧ください

ただし、私のメソッドはphantomjsに依存する_server-side_実装です。 私の意見では、クライアント側のエクスポーターも用意するのは良い考えです。 完成したバージョンを見てみたいです

@yuviiこんにちは！ 私は自分のプロジェクトをリリースしました（おそらくこの問題を更新する必要がありました...）、それは時々/ axisJSです。

http://times.github.io/axisJS/でオンラインで遊ぶことができます

PDFは非常に便利です。PRを見ていきます。 私は最終的にaxisJSの印刷フォーマットがまもなく必要になります...

うわー、あなたは実際に先に進んで、これのために全体のGUIを作りました。 エクスポート用のコマンドラインツールを作成しました。 とてもかっこいいね。

これは、この時点でのサポートの問題のようなものです。 @yuviiのCLIツールは本当にクールで便利なので、これについての会話を彼のプルリクエスト＃555に直接伝えましょう。

これに到達した人は誰でも、ここでの@gonsakonの実装は、私がAngularで行ったことを実行しますが、jQueryを使用した場合—私が与えたものよりも簡単な例かもしれません！

こんにちは、私はc3チャート、つまりSVGを画像に変換しようとしていますが、機能しません。
外部cssであるc3.cssが適用されていないようです。
外部CSSをSVGに適用するにはどうすればよいですか

@ raj-mehta C3 Googleグループで質問してください。これはクローズドな問題であり、クエリで提供した詳細が不足しているため、実際に支援することは不可能です。

元に戻してくれてありがとう、
次のsvgを使用し、ur sample.htmlで使用しましたが、ブラウザーのグラフとcanvgから変換された画像が一致しません。

非常に幅の広い軸バーでraj-mehtaと同じ問題が発生します。 これに対する解決策を見つけましたか？

問題は、エクスポートを行うときにインラインスタイルのみが重要であるということです。 ローカルバージョンのc3を変更して、いくつかの追加のスタイリング（奇妙な黒い背景を示す折れ線グラフのfill-opacity：0など）を追加すると、画像が期待どおりに表示されます。

@aendrewこのhttp://times.github.io/axisJS/#/のソースを教えてくださいこのチュートリアルが必要です..助けてください

私のモジュールを使用して、PNGエクスポート機能をc3チャートに追加できます： https ：

こんにちは@annatomka非同期負荷グラフでhttps://github.com/annatomka/ng-c3-exportを使用できますか？ 私のコード：

app.controller（ "ChartController"、function（$ http）{
$ http.get（ 'URL'）。
success（function（data、status、headers、config）{
c3.generate（{
bindto： "＃My-chart"、
データ：{
タイプ： 'パイ'、
列：[
['サンプル'、30]、
['sample2'、200]
]
}
}）;
}）。
error（function（data、status、headers、config）{
デバッガ;
}）;

-グラフは正しく描画されますが、ダウンロードアイコンは表示されません

@annatomkaすばらしいモジュールですが、グラフの非同期読み込みにも問題があります。 グラフを再生成すると、ダウンロードボタンが消えます。

@annatomkaそれはとても良いです！ 私はあなたのモジュールを次のAngularプロジェクトで完全に使用しています！

@annatomka +1

@ morales-franco @johnmarkli非同期読み込みの問題を修正しました。新しいバージョン（0.1.5）で試すことができます。 私もいくつかの例を追加しました。

@annatomka私の円グラフが出てきます

私はcssに何が欠けていますか？

@annatomkaすばらしいモジュールですが、ブラウザにも問題があります。 モジュールのInternetExplorerでは機能しません。 バグを修正していただけますか？ ありがとう

真剣にここに、人々。 annatomka / ng-c3-exportに問題がある場合は、 annatomka / ng-c3-export発行キューに報告して

ロックねじ。