C3: 导出此惊人的图表

嗨，

C3图表是目前可用的最佳图表。

唯一的事情是如何导出图表？

在这方面请帮助我。

谢谢。

我也试图将图表导出为pdf或我想将其转换为图像...如果有人有想法请帮助

仅使用Javascript并不是一件容易的事，特别是如果您想支持许多浏览器版本。 如果浏览器支持canvas（所有现代浏览器都支持canvas），则有相当简单的方法。 您可以使用canvg（https://code.google.com/p/canvg/）库，它将SVG转换为画布。
然后，类似这样的内容（http://www.nihilogic.dk/labs/canvas2image/）使用户可以将其另存为本地图像文件。 我自己没有尝试过，所以我无法确定它是否可以在C3图表中可靠地工作。 但这是一个探索的方向。

嗨，我发现这可能很有用（http://jsfiddle.net/8ypxW/3/），但我还没有成功。
我要尝试的是将C3图表（div标签）放在原始代码（span标签）内，但是下载的结果是空图像！
更新：http://jsfiddle.net/panubear/mGDt8/ >>输出图像是在没有c3图表的情况下生成的。

我正在为正在使用的基于C3的图表构建器执行此操作，完成后将共享我的代码。 同意@lblb关于canvg的观点，这就是Quartz在他们的ChartBuilder中使用的东西。 有关如何执行此操作的想法，除了输出PNG之外，请参见： https :

好的，开始工作了。 这是我执行此操作的Angular指令，从Quartz / Chartbuilder中无耻地获取了。 忽略所有Angular东西，所有实际工作都在createChartImages() 。

简而言之，这是我需要做的：

1. 创建一个空的canvas元素。
2. 从c3.js中获取所有样式，并将其内联到大多数SVG元素上，请注意不要对与数据相关的任何对象执行此操作（通过CSS样式属性对其进行着色。c3.css的第6行将将通过C3设置的任何数据线颜色替换为stroke: #000和fill: none 。）
3. 找到CSS的“可见性”属性具有“隐藏”的任何元素，并将其设置为“ display：none”。 这将隐藏C3的所有未使用轴。
4. 在所有SVG数据路径上设置fill: none ，这样它们就不会获得怪异的贝塞尔曲线裁剪效果。
5. 使用Canvg生成PNG。 我的指令中还有一个函数，可以使用NYT的片段生成SVG。

请注意，我仅使用简单的序列图进行了实际测试，其他类型的图表很有可能会出现问题，并且需要进行特定的调整。

编辑：似乎“区域”类型完全破坏了PNG输出，尽管SVG输出看起来不错。 我已对其进行修复，因此SVG输出可用于所有图表类型AFAIK。

最新编辑：我更新了Gist，它现在适用于所有图表类型，包括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进行对话。

任何人都可以做到这一点， 在这里实现了我对Angular所做的工作，但是对jQuery来说，这可能比我给出的例子更简单！

嗨，我正在尝试将c3图表（即SVG）转换为Image，但无法正常工作。
看起来像c3.css这是外部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”，函数（$ http）{
$ http.get（'URL'）。
成功（功能（数据，状态，标题，配置）{
c3.generate（{
bindto：“＃我的图表”，
数据：{
类型：“派”，
列： [
['sample'，30]，
['sample2'，200]
]
}
}）;
}）。
错误（功能（数据，状态，标题，配置）{
调试器；
}）;

-正确绘制图表，但没有下载图标

@annatomka很棒的模块，但是我也有异步加载图形的麻烦。 重新生成图形后，下载按钮消失。

@annatomka太好了！ 我在下一个Angular项目中完全使用您的模块！

@annatomka +1

@ morales-franco @johnmarkli我修复了异步加载问题，可以在新版本（0.1.5）中尝试。 我也添加了一些示例。

@annatomka我的饼形图即将出现

我在CSS中缺少什么？

@annatomka很棒的模块，但是我在浏览器上也遇到了麻烦。 它不适用于您模块上的Internet Explorer。 您能解决这个错误吗？ 谢谢

认真的在这里，人们。 如果您对annatomka / ng-c3-export有问题，请在annatomka / ng-c3-export问题队列中报告。

锁紧螺纹。