使用Chart.js图表库制作漂亮的响应式表单(js图形图表)

编辑：rootadmin

推荐整理分享使用Chart.js图表库制作漂亮的响应式表单(js图形图表)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:js图形图表,gallery.echarts.js,echarts chart.js,js 图表,chart.js文档,chart.js文档,echarts chart.js,js 图表,内容如对您有帮助，希望把文章链接给更多的朋友！

入门基础

Chart.js是一个基于HTML5的开源图表库，可以方便简洁的绘制美观的图表。

主要特性包括：

1、支持6种不同的表格类型：曲线图、柱状图、饼状图、雷达图、极坐标区域图、环图。2、基于HTML5开发，支持所有浏览器（包括IE7/8）.3、不依赖于其他任何库，仅有4.5k大小，并且可以进行定制。

Chart.js 是一个基于 HTML5 canvas 的响应式、灵活的、轻量化的图表库。库中提供了六种不同的图表类型，每种类型都带有一系列的自定义选项。如果这些还不够，你还可以创造自己的图表类型。

Chart.js 的六种图表类型代码一共只有 kb 大，并做了 gzip 压缩处理，另外该库是模块化的，你可以仅仅使用自己需要的图表类型，从而进一步节省了空间。下面是包含该库的 cdnjs 链接。

JavaScript

可用的设置项

从提示信息到动画效果（校稿者注：tool tip是指鼠标移动到某个元素上弹出的提示信息），Chart.js 允许你改变图表的几乎所有特征。在本节，我将会修改一些设置，以展示 Chart.js 是如何被创建出来的。我们将从下面的 HTML 代码开始：

XHTML

对于首次展示，我会创建一个折线图。为了使图表有意义，这里会有几个需要设置的基本选项。折线图需要一个标签数组和数据集。标签会显示在 X 轴。我已经为折线图模拟了一些数据，这些数据被分开放到一个数组里面去，每个数据有自己的填充颜色、折线和点集。

在这个例子中，我将 fillColor设置为透明。如果你不设置 fillColor 的值，将默认设置为黑色或者灰色。这同样适用于其他值。色彩使用 RGBA、RGB、hex 或 HSL 格式定义，与 CSS 是一样的。

JavaScript

设置全局选项

在代码中我已经设置了一些全局值。animationSteps 决定了动画的持续时间。根据需要，你可以修改更多的选项，比如 scaleLineColor 和 scaleIntegersOnly。我建议浏览 Chart.js 文档查看库中提供的其他选项。

JavaScript

设置专有的图表选项

除了全局选项，还有一些针对特定图表类型的配置选项。在这个折线图中，我将会设置这类选项，希望对你有所启发：

JavaScript

Chart.js 生成的图表默认为非响应式。将 responsive 设置为 true 可以使其转化为响应式图表。如果你需要让每个图表都成为响应式的，我推荐设置全局值，就像这样：

JavaScript

下面你会看见这个折线图的示例：

增加与移除动态数据

有时你需要展示时刻变化的数据。股票市场便是这个应用场景的典型例子。这本节中我将会创建一个柱形图，并且在动态删除数据的同时增加数据。我会使用一些随机数据，并在这个例子中通过柱形图来展示数据。本例中的大部分代码与上一个例子相似。一旦我们拥有自己的 HTML（与上一个例子一样），便可以添加自己的 JavaScript。

首先我们需要编写代码将动态数据填充进图表。我使用function表达式生成随机值，然后将其赋给一个变量 dData。这些值会在需要变化时为我们提供随机的数据。像之前的例子一样，我创建了一个标签数组和数据集，并设置了一个任意的 fillColor。

JavaScript

现在是时候编写代码来为我们的图表删除与添加柱形了。开始时我们初始化 index 的值为，我使用了两个方法：removeData() 和 addData(valuesArray,label)。调用实例的 removeData() 方法删除图表所有数据集的第一个值。在 barChartDemo 这个例子中，数据集的第一个值被移除了。调用 addData() 顺着标签传递一个数组值，在图表的最后增加一个新的数据节点。下面的代码片段每 3 秒钟会更新一次图表。

JavaScript

另一个更新图表数值的方法是直接设置数值。在下面的例子中，第一行是将第一个数据集的第二个柱形的数值设为。如果你在这时更新，柱形会通过动画将其当前值变为。

JavaScript

这里是柱形图的示例（由SitePoint在CodePen上创建）：

结论

这个教程覆盖了关于 Chart.js 的一些重要功能。第一个例子展示了一些全局设置的使用，同时，Chart.js也为每个图表类型提供了专属的自定义设置。如果当前可用的图表无法满足你的需求，你还可以创造自己的图表类型。我推荐你浏览文档，加深关于该库什么可以做，什么无法做的认识。

JavaScript如何调试有哪些建议和技巧附五款有用的调试工具以下内容是关于javascript如何调试有哪些建议和技巧的相关知识，具体详情请看下文吧。浏览器开发者工具我个人最喜欢Chrome开发者工具。虽然Safari和Fire

基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式前言在面向对象的编程范式中，封装都是必不可少的一个概念，而在诸如Java，C++等传统的面向对象的语言中，私有成员是实现封装的一个重要途径。但

JS实现双击屏幕滚动效果代码本文实例讲述了JS实现双击屏幕滚动效果代码。分享给大家供大家参考，具体如下：这里演示双击滚屏效果代码的实现方法，不知道有觉得有用处的没，

标签: js图形图表

本文链接地址:https://www.jiuchutong.com/biancheng/382670.html 转载请保留说明！

上一篇：JS基于Ajax实现的网页Loading效果代码(js.ajax)