nyChart是基于JavaScript (HTML5) 的图表控件。使用AnyChart控件，可创建跨浏览器和跨平台的交互式图表和仪表。AnyChart 图表目前已被很多知名大公司所使用，可用于仪表盘、报表、数据分析、统计学、金融等领域。AnyChar HTML5图表高度可定制且高度兼容。拥有纯JavaScript API，AnyChart图表内置客户端数据实时更新，多层次向下钻区和具体参数更新。强大的主题引擎使你通过一系列图表进行独特的演示体验，而PDF和图像输出能产出图书质量打印文档。

Bug修复：

• DVF - 2170- 修复AnyChart UI和其他AnyChart产品之间的兼容性问题。
• DVF - 2017- 修复ExtJS（3.4和更早）旧版本的兼容性问题。
• DVF - 2167- 修复图表滚动和连续系列的bug。
• DVF - 2017- 修复TreeMap图表的工具提示bug。

更多AnyChart相关产品的最新资讯，请联系【在线客服】

查看更新原文：AnyChart v7.10.1

慧都科技，十三年行业经验，专注提供软件技术整体解决方案，致力打造全球最大的软件技术一站式服务平台。

慧都控件｜帮助企业打造成功软件

慧都提供全球优质控件产品/控件培训/项目定制开发/方案咨询/现场实施/项目外包/专业测试

微信ID：EVGET_Huidu

企业QQ：800018081｜电话：023-66090381

扫码关注微信

天我们将为大家带来受广大开发人员认可的3款JavaScript 图表工具，分别是 LightningChart JS、HighCharts、Plotly，本文将通过API文档支持、适用范围、支持的渲染数据等6个方面进行介绍，希望能帮大家选择适合自己的图表产品。

Lightningchart JS

LightningChart JS 是一款高性能的 JavaScript 图表库，专注于Web端数据实时可视化。支持使用高数据速率同时监控数十个数据源，其GPU加速和WebGL渲染可以确保您的设备的图形处理器得到有效利用，实现高刷新率和流畅的动画。可以用于贸易、工程、航空航天，医药和其他领域的应用。

API文档

LightningChart JS 提供了完整的 API 文档，该文档详细介绍了 JS 库中包含的所有类、枚举、接口、函数和对象。同时技术文档还辅以行业示例、教程、关于使用特定图表的介绍，以及在特定行业中如何应用这些图表的知识。

使用范围

LightningChart JS 支持与 Angular、TypeScript 和移动应用程序一起使用，也可以在 C#/Java Web 应用程序中使用它。
如果您对 .NET 开发非常感兴趣：LightningChart .Net 提供了一个完全专注于C#的框架，C# 框架可以帮助我们创建一个基本模板（WPF、WINFORMS），以便在我们的 Visual Studio 中修改代码和源数据。

支持的渲染数据量

LightningChart JS 与其他库一样有局限性，但这些局限性比较小。

在高端PC上使用JS折线图时，数据量会根据折线图类型而有所不同：

• 静态折线图：渲染超过 5 亿个数据点，加载 1 亿个数据点仅需 6.5 秒。
• 刷新折线图：渲染超过 200 万个数据点。
• 附加折线图：每秒渲染超过 400 万个新数据点。

渲染性能

LightningChart JS 使用 WebGL 渲染，是Microsoft Visual Studio数据展示速度最快的2D和3D图表制图组件，可实时呈现超过10亿数据点的海量数据。支持与所有可用的 JS 图表示例进行交互。

使用范围

LightningChart JS 有强大的 NPM 包，支持在服务器应用程序中呈现 LightningChart 图表。详情可在 NPM 上查看https://www.npmjs.com/package/@arction/lcjs

交互性

LightningChart JS 拥有多个 UI 功能，包括触摸屏兼容性、缩放、平移和工具提示。这些功能是完全可自定义。

许可证

LightningChart JS 有多种许可选项，包括免费社区版本（用于非商业目的）、Web 开发人员许可证、应用程序开发人员许可证和完全适应用户需求的企业许可证。

LightningChart 数据可视化解决方案是适用于 .NET 和 JavaScript 的高级数据可视化库，支持处理数十亿的图表和仪表盘，是开发医疗技术、保健、金融等应用程序的首选图表控件。

HighCharts

Highcharts 是一个用纯 JavaScript 编写的一个图表库， 能简单便捷的在 Web 网站或是 Web 应用程序添加有交互性的图表。

API文档

HighCharts 提供了一个文档站点，用户可以在其中学习如何安装和实现多种类型的图表，同时我们可以使用“ 图表选择器 ”工具，尝试多种类型的图表。

适用范围

Highcharts 应用于财务数据展示，也可以应用于数据展示中。此外，如果需要在地图上显示数据，也有世界地图的 3D 版。

对于 JS，我们可以在网站或移动应用程序中使用 Ionic 的 Capacitor 等框架。对于 C#，我们可以使用HighCharts，因为它也同样支持 .NET 和 .NET CORE ， 也就是说我们可以在 Web / 桌面应用程序中使用。

支持的渲染数据量

HighCharts 默认限制为 1000 个数据点，具体可以支持多少数据点目前没有特别准确的数据，通过查询论坛，有报告显示尝试使用超过初始限制的数据点。

渲染性能

HighCharts 使用可缩放矢量图形、HTML5 和 CSS，该图表库有一个服务器端选项，利用 Phantom JS 技术。

它能为各种 Web 端开发提供快速和原生的支持，如DOM 处理、CSS 选择器、JSON、Canvas 和 SVG。

交互性

可根据设备/软件的兼容性，提供触摸屏兼容性、缩放、平移和工具提示。

许可证

在许可方面，HighCharts 在其免费许可的基础上提供 Web、SaaS、SaaS+ 和 OEM。

Plotly

Plotly是一个基于JS的开源数据可视化框架，提供了许多库，可以使用多种语言使用开源编码，包括 Python、R、Julia、JS、GGPlot2、F#、MatLab 和 Plotly Dash 。

API文档

Plotly 有自己的文档库，但它的 C# 文档不是太如人意，因为实时案例加载得很慢。

但对于编程，其文档提供了创建图表的完整代码。对于每种 Web 语言，提供了包含许多示例的完整文档。

使用范围

Plotly 支持您在在 JS 和 C# 中创建多种类型的图形、地图和实时对象识别，但处理的数据量有限。

支持的渲染数据量

Plotly目前对于渲染的数据量依然没有比较准确的数据，通过论坛的查询，似乎标准可能是 500k 的数据，但若要尝试渲染数百万点的数据，就会导致崩溃。

渲染性能

Plotly 是使用 D3.js 技术构建的。此外，Plotly 还利用了 NVIDIA Inception，这是一种虚拟加速器，主要是为支持使用 GPU 的初创公司，即云端计算。但这对客户来说并不划算，因为它增加了运行服务的成本。

交互性

根据设备/软件的兼容性，可提供触摸屏兼容性、缩放、平移和工具提示。

许可证

Plotly 几乎仅限于使用开源或企业版，无法根据用户的要求立即了解正确的定价。

以上就是为大家介绍的3款JavaScript 图表库，您更中意哪一款呢？欢迎在评论区告诉我~

品经理日常工作中，避免不了需要去设计后台，在后台中需要去实现一些可视化的图表，那么这些可视化图表如何制作呢？

产品经理日常工作中，避免不了需要去设计后台，在后台中需要去实现一些可视化的图表，那么这些可视化图表如何制作呢？

可以通过四种个不同的方式，分别是：表格截图、Axure图形绘制、Axure网页框架和Axure第三方元件。

一、使用Axure图形绘制可视化图表

Excel表格基本上每个人必备的基本计算机操作，在这里就不做演示了，先简单说说Axure图形绘制可视化图表。

通过axure自带一些图形控件，可以轻松地通过改变形状、大小、颜色来调整需要实现一些简单的图表样式，如柱状图。

用过PS的人应该都会知道Photoshop里面有个钢笔工具，主要用来勾勒一些不规则的轮廓以及勾勒线条或者抠图。Axure从8.0版本开始，也加入了钢笔工具以及切图等功能，Axure的钢笔工具其实和PS里面的钢笔工具有比较多的相似之处。所以当绘制一些折线图时，可以通过Axure的钢笔工具完成。

说几个使用Axure钢笔工具的时候需要注意的点：

• 使用钢笔工具时，在完成最后的点的描绘的时候，需要按键盘左上角的【Esc键】或【双击鼠标】完成绘制；绘制时可以添加一些辅助线，帮助定位点不偏移。
• 完成绘制的时候，可能很多朋友还看不到线条，那是因为钢笔工具的线条粗细默认是none的，也即是没有线条的，因此在线条粗细那里设置一下即可。

二、利用Axure框架嵌入可视化页面

以上是一些简单的可视化图表绘制，简易轻便，但如果要实现一些比较麻烦的图表，如圆饼图、环形图、漏斗图等更加多样化的数据可视化图表或是给图表加上一些特效，该怎么办呢？

可以使用antv、echarts、HighCharts等可视化工具来帮你制作可视化数据图表。

使用这种方法来实现数据可视化的步骤如下：

• 进入antv、echarts、HighCharts等任意一个可视化工具的官网（百度以上关键词即可）找到对应的可视化图表；

• 将数据可视化图表的前端代码拷贝下来，在代码编辑器中修改成自己想要的数据指标以及数据项，复制到文本文件中并保存为.html文件；
• 将生产的.html文件放到要生成Html原型的文件夹中；

• 在原型中，拖入一个【内联框架】-选择框架目标-链接到URL或者文件-选择上一步所保存的.htm路径文件；

生成Html原型：

相对来说这种方式可以实现非常多的效果和样式，实现起来也比较方便快速，但如果对代码非常头疼的产品经理，无疑是增加负担。加上每增加、修改一个图表都需要来回复制代码，生成文件使用这种方法来制作，在后期的维护和修改上，并不灵活和方便，这种情况，可以考虑下面一种方法。

三、使用Axure元件快速制作可视化图表

感谢那些技术大佬，贡献了这个Axure组件库——Axhub Charts图表元件。这个元件的使用方法和我们常用的元件差不多，直接拖拽到内容区域进行处理即可。

不过该元件比其他普通的元件稍微复杂一些，元件使用了1个矩形+2个中继器来实现，通过加载组件库中的JS代码，呈现图表效果，（说到代码，元件的作者已经把需要代码处理的地方处理好了，使用者不需要懂代码）。

矩形的作用是设置图表的宽高尺寸的，第一个中继器的作用是设置横坐标以及统计指标（曲线、柱形、扇区等），因为中继器的列名不能够使用中文命名，元件的作者为了能够满足大家的个性化需求，因此用第二个中继器来设置是否显示坐标轴、图例标记、主题颜色等。

元件中有详细的说明以及常见问题解释，结合了阿里的Antv数据可视化工具来做的，使用的时候，步骤如下：

• 将元件拖拽到Axure的内容区，并根据需要调整元件的宽高尺寸，图表显示出来的大小就是元件的宽高尺寸；
• 修改axhub-line-data这个中继器的数据集，修改前可预览看看预设的数据是怎么显示的再作修改，一般况下，列名和行分别表示着柱形或者线条和横坐标内容；
• 基本上完成以上两步即可，如果有其他的个性化需要，可在axhub-line-config中设置，非常方便！

生成Html原型或者预览，都可以看到动态的图表，必须在有网络的情况下才能够看到图表，因为原型需要加载在线的antv或echarts的库文件来渲染图表，当然你也可以把渲染库下载到本地，修改图表元件库的指向链接就可以了。

只是为了提高效率而已，在使用的过程中，不必想着花大量的时间去将原型做得多好多炫，当然，如果自己非常熟练了，或者很多东西都已经元件化了，在不影响效率和进度的情况下，把原型做得更完美一些也是可以的。

组件库作者介绍的非常详细，可以自己下载使用，链接地址：

https://axhub.im/pro/3320ad07d6897b89/#g=1&p=about

作者：Iam产品人，公众号：Iam产品人

本文由@Iam产品人 原创发布于人人都是产品经理，未经许可，禁止转载。

题图来自Unspalsh， 基于CC0协议