网络上的图表库不乏选项。 非常好! 竞争对消费者有利。 保持高质量。 这里肯定是对的。 图表库的景观令人印象深刻,范围从优质免费到优质收费。
我们仅将此处提供的选项限制为SVG图表。 我认为SVG是绘制图表的绝佳方法,因为:
- 任何尺寸看起来都清晰
- 样式容易
- 可以是互动的
- 并且可以使其易于访问。
通常,我认为SVG是图表的最佳选择,但这并不是唯一的选择。 有一些工具可以根据图表数据创建平面栅格图形。 有<画布>图表选项。 您甚至可以使用HTML元素制作基本图表。
早期考虑
选择图书馆时,需要考虑很多方面。 其中很多是相当明显的。 我主要希望您记住,有很多注意事项,因此值得考虑各种解决方案。
- 付费还是免费? 有些人预算庞大,宁愿为软件付费。 对于其他人,免费是唯一的选择。
- 是否开源? 许可证与您要构建的内容兼容吗? 您正在构建开放源代码并且兼容(或不兼容)的东西吗? 您是否正在重新分配构建的内容(例如主题)? 您要建立商业广告吗? 归因要求是什么?
- 功能集是什么? 您只需要一种图表吗? 多种类型? 这些是什么? 您是否希望单个图书馆可以满足其他图表需求,例如股票或地图?
- 有哪些依赖性? 有些库需要jQuery。 更常见的是,需要像D3这样的SVG库。 有些没有依赖性。
- 可以提供哪种支持? 购买时包括在内吗? 可以作为附件购买吗? 您是否需要它? 开源回购看起来像提供了场所帮助吗?
- 它是为框架构建的吗? 其中一些选项专门用于框架,如React,Angular或Embed。 当然,也有一些针对CMS或为特定后端语言的数据输出而构建的选项。
- 文档如何? 有很多例子吗? 它们的可读性如何?
- 您还需要其他哪些功能? 您的用户会期望能够打印这些吗? 导出数据? 与他们互动? 自定义它们?
- 主题如何运作? 您是否需要它们附带精美的主题? 您打算自己设计样式吗?
有很多事情要考虑!
名单!
这很可能是不完整的。 如果我错过了输出SVG的图表库,请在评论中添加'em'!
我不会在每个评论上留下很多评论。 注意事项列表是如此之多,多变,实际上取决于您是否要检查并做出选择。 我将在此处抓取一些屏幕截图,以展示每一个都必须提供的一些东西,以及一个现场演示(如果我能找到的话)。 这并不能全面显示每个人的能力,只是一种口味。
图表
![](https://i-blog.csdnimg.cn/blog_migrate/4fc1d0c64832792ec18ecca16ee3506a.png)
看笔
通过amCharts( @amcharts ) 将SVG过滤器与amCharts一起使用
在CodePen上 。
高图
![](https://i-blog.csdnimg.cn/blog_migrate/e2a7567618fe821a6f88ded3617d018a.png)
看笔
Bencharmin Cassinat( @benftwc )的Highchart Javascript集成
在CodePen上 。
金图
![](https://i2.wp.com/css-tricks.com/wp-content/uploads/2016/10/zingchart.png?resize=3150%2C2174&ssl=1)
融合图
![](https://i1.wp.com/css-tricks.com/wp-content/uploads/2016/10/fusioncharts.png?resize=3158%2C2180&ssl=1)
看笔
使用融合图表的Rad图表 Chris Vasquez( @cvasquez )
在CodePen上 。
Google图表
![](https://i1.wp.com/css-tricks.com/wp-content/uploads/2016/10/googlecharts.png?resize=3290%2C2146&ssl=1)
看笔
在 Geoff( @gapple ) 的Google图表中切换系列可见性
在CodePen上 。
密谋
![](https://i0.wp.com/css-tricks.com/wp-content/uploads/2016/10/plotly.png?resize=3050%2C2164&ssl=1)
看笔
使用Plotly JS by plotly( @plotly )的自适应流体布局示例
在CodePen上 。
图表
![](https://i-blog.csdnimg.cn/blog_migrate/9c48d0efcf738d9d8492ad5f52245560.png)
看笔
XCharts由Sten Hougaard( @ netsi1964 ) 基于D3的库
在CodePen上 。
morris.js
![](https://i-blog.csdnimg.cn/blog_migrate/70c75a66de5c0bf2885ef0144cedcd13.png)
看笔
Morris.js图表– Cioban Andrei( @andreic )的简单示例
在CodePen上 。
紫外图
![](https://i-blog.csdnimg.cn/blog_migrate/eec3034a7158c9a58e7ecd228b9cb983.png)
轮廓
![](https://i-blog.csdnimg.cn/blog_migrate/9bc489f6bc686ff9f58083847f2c8bd3.png)
CHARTIST.JS
![](https://i-blog.csdnimg.cn/blog_migrate/99e5400ef166f3e0e19b7fe3e1e1f09e.png)
看笔
与 Sarah Drasner( @sdras ) 合作的Chartist和Animations
在CodePen上 。
n3图
![](https://i-blog.csdnimg.cn/blog_migrate/d1e60f3fc94a70d3fc3ea8965d9d3d0a.png)
看笔
n3-由Jim Gibbs( @jimgibbs ) 绘制 的图表
在CodePen上 。
灰烬图
![](https://i2.wp.com/css-tricks.com/wp-content/uploads/2016/10/ember-charts.png?resize=3252%2C2102&ssl=1)
反应SVG图
![](https://i-blog.csdnimg.cn/blog_migrate/954ee03fe1521bc59e73ddd23963c71b.png)
使用<canvas>的选项
有很多选项专门输出到<canvas>,例如Chart.js 。
我对<svg>
了解更多,但是如果您有充分的理由选择画布,这里还有其他一些内容:
祝好运! 并让我们知道您在这些方面是否取得了成功。