CanvasJS

我们经常在基于分析的网站或包含一些常见议题（如人口、百分比等）调查的网站上看到图表。这些图表常用于数据解释领域，用于创建核心行业的网络共享或利润分配。然而，如果我们整体观察，这些图表或条形分布是可渲染的。当图表上绘制的值改变时，它们会改变。为了简化这些可渲染图表的构建，JavaScript 得到了库的巨大支持。CanvasJS 是一个专门用于图表的库。让我们从头开始学习它。

什么是 CanvasJS？

正如在 JavaScript 的官方库世界中所描绘的，CanvasJS 是一个流行的图表库。它是一个易于使用的基于 JavaScript 和 HTML5 的库，可以构建在 Canvas 元素上。它具有广泛的设备兼容性，包括Android、iPhone & iPad、Windows Phone、Microsoft Surface、台式机等。

CanvasJS 是一个强大的图表创建库，使用户能够创建丰富的 UI 仪表板和图表，这些图表可以在所有设备上工作，而不会影响我们 Web 应用程序的功能或维护。它已经提供了动态且炫酷的主题，并且比传统的 SVG 图表和 Flash 快 10 倍。用户可以使用 CanvasJS 轻松创建响应式、动态、可渲染、轻量级且丰富的 UI 仪表板。

下载

用户可以使用下面给出的简单的 npm 命令下载 CanvasJS。

在此步骤之后，我们需要先导入它。这可以根据模块类型和正在考虑的应用程序模式以多种方式完成。

CanvasJS 包默认在 CommonJS 上运行，可以轻松地用于 property/webpack，如下所示。

上面显示的依赖项是本地的。要导入全局依赖项，请使用以下代码。

注意：dist 文件夹默认包含一个位于 dist/canvasjs.js.min.js 的最小化版本，这是一个生产版本，用于与 jQuery 一起使用。

处理图表数据的概念

要在 CanvasJS 的图表中处理数据，我们需要添加数据。所有要绘制的数据都应添加到名为“data”的数组中。它是 Chart Options 的受限属性。数组的每个元素都被视为一个对象，称为数据系列，它只是数据元素的逻辑分组。单个数据元素或点始终称为 dataPoint。为了理解数据在 CanvasJS 中如何工作，我们将在此教程中始终使用 dataPoint 和 dataSeries 进行说明。

让我们来看一下 data 数组中 dataSeries 对象的格式。下面的代码片段供参考。

什么是 dataPoint？

所有要在图表上根据所需设计绘制的值都称为 dataPoint。我们可以轻松地将每个 dataPoint 添加到数组中，该数组成为 dataSeries 的成员。最常用的 dataPoints 是绘制在 x、y 和 label 轴上的。请参阅下面的示例，了解如何绘制 dataPoint。

添加 dataPoints

为了理解 CanvasJS 的工作原理，了解 dataPoint 应包含 y 值很重要。要绘制一个系列，只有 y 值被视为 dataPoints。如果没有提供 x 值，它们将默认设置为 零 的绝对值。让我们通过一个例子来理解。

绘制 x 值

在上面的代码片段中，dataPoint 已通过设置数字值或日期时间值来定位在 x 轴上。

dataPoint 标签

标签被定义为显示在图表 x 轴上的值。如果没有提供 x 值，则标签将采用默认值，并且可以轻松自定义。

dataPoints 中的索引标签

索引标签通常定位在 dataPoint 的下方或上方。

一次性完成所有操作

既然我们现在对使用 CanvasJS 非常熟悉了，让我们花更多时间来创建一些工业级的复杂图表。为此，我们准备了一个示例，以防用户错过如何应用上述概念。

在此示例中，我们将从头开始创建一个股票图表，并使用实时示例对其进行自定义。在每次渲染步骤中，如果我们使用源代码在编译器上运行它，我们可能会更好地理解它。

注意：该图表易于渲染。因此，建议在 HTML 编译器上运行它以获得体验。

在本地机器上运行示例的步骤如下

1. 将代码复制到本地 HTML 编辑器中。
2. 运行 HTML 文件。
3. 我们可以在本地系统上看到运行的股票图表。
4. 如果需要，请尝试添加更多自定义图表设计。

结论

在本教程中，我们了解了 CanvasJS 及其应用。我们还发现了如何使用 CanvasJS 渲染自定义的 JavaScript 组件，CanvasJS 可以被视为 JavaScript 中的一个实用工具或库，专门用于处理图表。虽然 D3.js 在考虑时也提供了类似的体验，但由于其健壮的性质和复杂性，它并不受欢迎。CanvasJS 轻量级、易于处理、除了将其导入主 HTML 文件外，不需要任何其他依赖项，并且非常易于学习。在后面的部分中，我们还看到了示例中属性的分步包含以及 dataPoints 如何与标签和轴一起工作。我们还从上面的示例中看到，我们毫不费力地创建了一个股票图表。