响应式入门,你了解vue3.0响应式数据怎么实现吗( 五 ) _移动设备

主要特性包括：
1、支持6种不同的表格类型：曲线图、柱状图、饼状图、雷达图、极坐标区域图、环图。
2、基于HTML5开发，支持所有浏览器（包括IE7/8）.
3、不依赖于其他任何库，仅有4.5k大小，并且可以进行定制。
Chart.js 是一个基于 HTML5 canvas 的响应式、灵活的、轻量化的图表库。库中提供了六种不同的图表类型，每种类型都带有一系列的自定义选项。如果这些还不够，你还可以创造自己的图表类型。
Chart.js 的六种图表类型代码一共只有 11 kb 大，并做了 gzip 压缩处理，另外该库是模块化的，你可以仅仅使用自己需要的图表类型，从而进一步节省了空间。下面是包含该库的 cdnjs 链接。
JavaScript
可用的设置项
从提示信息到动画效果（校稿者注：tool tip是指鼠标移动到某个元素上弹出的提示信息）， Chart.js 允许你改变图表的几乎所有特征。在本节，我将会修改一些设置，以展示 Chart.js 是如何被创建出来的。我们将从下面的 HTML 代码开始：
XHTML
对于首次展示，我会创建一个折线图。为了使图表有意义，这里会有几个需要设置的基本选项。折线图需要一个标签数组和数据集。标签会显示在 X 轴。我已经为折线图模拟了一些数据，这些数据被分开放到一个数组里面去，每个数据有自己的填充颜色、折线和点集。
在这个例子中，我将 fillColor设置为透明。如果你不设置 fillColor 的值，将默认设置为黑色或者灰色。这同样适用于其他值。色彩使用 RGBA、RGB、hex 或 HSL 格式定义，与 CSS 是一样的。
JavaScriptvar lineData = https://www.xysc168.com/guoxue/{labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4','Data 5', 'Data 6', 'Data 7'],datasets: [{fillColor: 'rgba(0,0,0,0)',strokeColor: 'rgba(220,180,0,1)',pointColor: 'rgba(220,180,0,1)',data: [20, 30, 80, 20, 40, 10, 60]}, {fillColor: 'rgba(0,0,0,0)',strokeColor: 'rgba(151,187,205,1)',pointColor: 'rgba(151,187,205,1)',data: [60, 10, 40, 30, 80, 30, 20]}]}
设置全局选项
在代码中我已经设置了一些全局值。animationSteps 决定了动画的持续时间。根据需要，你可以修改更多的选项，比如 scaleLineColor 和 scaleIntegersOnly 。我建议浏览 Chart.js 文档查看库中提供的其他选项。
JavaScriptChart.defaults.global = {animationSteps : 50,tooltipYPadding : 16,tooltipCornerRadius : 0,tooltipTitleFontStyle : 'normal',tooltipFillColor : 'rgba(0,160,0,0.8)',animationEasing : 'easeOutBounce',scaleLineColor : 'black',scaleFontSize : 16}
设置专有的图表选项
除了全局选项，还有一些针对特定图表类型的配置选项。在这个折线图中，我将会设置这类选项，希望对你有所启发：
JavaScriptChart.defaults.global = {animationSteps : 50,tooltipYPadding : 16,tooltipCornerRadius : 0,tooltipTitleFontStyle : 'normal',tooltipFillColor : 'rgba(0,160,0,0.8)',animationEasing : 'easeOutBounce',scaleLineColor : 'black',scaleFontSize : 16}
Chart.js 生成的图表默认为非响应式。将 responsive 设置为 true 可以使其转化为响应式图表。如果你需要让每个图表都成为响应式的，我推荐设置全局值，就像这样：
JavaScriptChart.defaults.global.responsive = true;
下面你会看见这个折线图的示例：See the Pen Chart.js Responsive Line Chart Demo by SitePoint (@SitePoint) on CodePen.
增加与移除动态数据
有时你需要展示时刻变化的数据。股票市场便是这个应用场景的典型例子。这本节中我将会创建一个柱形图，并且在动态删除数据的同时增加数据。我会使用一些随机数据，并在这个例子中通过柱形图来展示数据。本例中的大部分代码与上一个例子相似。一旦我们拥有自己的 HTML（与上一个例子一样），便可以添加自己的 JavaScript 。