幻想，响应式图表。-css教程-PHP中文网

幻想，响应式图表。

数据都在我们周围。尽管搜索引擎和其他应用程序与基于文本的数据表示最佳作用，但人们发现在视觉上表示的数据很容易理解。今年早些时候，SitePoint发表了Aurelio的文章，介绍了Chart.js的介绍。本教程将对介绍进行快速回顾，然后更深入地查看图表的功能。

钥匙要点

库允许对图表进行广泛的自定义，包括工具提示，动画，甚至创建自定义图表类型。这同时包括全局设置和特定图表的选项，并且能够通过将响应式配置选项设置为true来使图表响应。

Chart.js还支持动态添加和删除数据，使其成为数据随时间变化（例如股票市场表示形式）的理想选择。这可以通过删除（）和adddata（valuesarray，label）之类的方法来实现，也可以通过直接设置图表中的值。

。

入门

>图表中的所有六个核心图表类型都仅为11KB，并且gzip’d且库是模块化的，因此您只能通过包括实际需要的图表类型来进一步降低文件的请求大小。以下是CDNJS链接，包括：>

可用配置选项

Chart.js允许您更改图表的几乎每个方面 - 从工具提示到动画。在本节中，我将修改一些设置，以说明Chart.js能够创建哪些图表。这是我们将从以下内容开始的HTML。

<span><script></script></span>

登录后复制

>对于第一次演示，我将创建一个线图。您需要设置一些基本选项，以使图表有意义。该行图期望一系列标签和数据集。标签出现在X轴上。我已经用一些虚拟数据填充了线图。数据分解为数据集。每个数据集都有填充，线和点的颜色。

> 在这种情况下，我将填充物设置为透明。如果您不设置填充物值，则将其设置为黑色或灰色。其他值也是如此。使用RGBA，RGB，HEX或HSL格式定义颜色，类似于CSS。

<span><script src="https://img.php.cn/upload/article/000/000/000/174049952240765.jpg"></script></span>

登录后复制

设置全局选项

>我包含了设置一些全局值的代码。 AnimationSteps确定动画持续时间。您还有更多的选择可以根据自己的需求进行修改，例如ScalelineColor和ScaleIntegerson。我建议您浏览图表。

<span><canvas id="canvas"></canvas></span>

登录后复制

设置图表特定选项

>除了全局选项外，还有用于单个图表类型的配置选项。我将在此行图中设置其中一些选项，以使您有一个想法：

图表生成的图表

>默认情况下不会响应。设置敏感的真实（如上所述）使它们响应迅速。如果您需要对每个图表进行响应，我建议您在全球范围内设置此图表，例如：：

<span>var lineData = {
</span>  <span>labels: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 
</span>           <span>'Data 5', 'Data 6', 'Data 7'],
</span>  <span>datasets: [{
</span>    <span>fillColor: 'rgba(0,0,0,0)',
</span>    <span>strokeColor: 'rgba(220,180,0,1)',
</span>    <span>pointColor: 'rgba(220,180,0,1)',
</span>    <span>data: [20, 30, 80, 20, 40, 10, 60]
</span>  <span>}, {
</span>    <span>fillColor: 'rgba(0,0,0,0)',
</span>    <span>strokeColor: 'rgba(151,187,205,1)',
</span>    <span>pointColor: 'rgba(151,187,205,1)',
</span>    <span>data: [60, 10, 40, 30, 80, 30, 20]
</span>  <span>}]
</span><span>}</span>

登录后复制

>下面您可以看到线图的演示：

<span>Chart.defaults.global = {
</span>  <span>animationSteps : 50,
</span>  <span>tooltipYPadding : 16,
</span>  <span>tooltipCornerRadius : 0,
</span>  <span>tooltipTitleFontStyle : 'normal',
</span>  <span>tooltipFillColor : 'rgba(0,160,0,0.8)',
</span>  <span>animationEasing : 'easeOutBounce',
</span>  <span>scaleLineColor : 'black',
</span>  <span>scaleFontSize : 16
</span><span>}</span>

登录后复制

请参阅codepen上的sitepoint（@sitepoint）的笔图表。

动态添加和删除数据

>有时您需要显示随时间变化的数据。这种情况的一个经典例子是股票市场。在本节中，我将创建一个条形图并动态删除以及向其添加数据。在这种情况下，我将使用一些随机数据，并决定用条形图表示数据。此示例中的大多数代码将类似于上一个示例。一旦拥有HTML（与上一个示例相同），我们可以添加JavaScript。

首先，我们将编写代码以使用虚拟数据填充图表。我使用函数表达式生成随机值，然后将其存储在变量DDATA中。然后，这些值可在需要时为我们提供随机数据。与上一个示例一样，我创建了一个标签和数据集数组，并设置了一个任意的填充物。

现在是时候编写删除并将条添加到我们的图表的代码了。我首先以11的值初始化索引变量。我使用两种方法：remaveAta（）和adddata（valuesarray，label）。在图表实例上调用removedata（）删除该特定图表上所有数据集的第一个值。如果Barchartdemo，则删除数据集的第一个值。调用AddData（）传递一个值和标签的数组，在图表末尾添加了一个新数据点。下面的代码段一次每3秒更新图表。

>在图表中更新值的另一种方法是直接设置值。在下面的示例中，第一行将第一个数据集的第二个栏的值设置为60。如果此时调用更新，则该栏将从当前值中启动到60。>

<span>var ctx = document.getElementById('canvas').getContext('2d');
</span><span>var lineDemo = new Chart(ctx).<span>Line</span>(lineData, {
</span>  <span>responsive: true,
</span>  <span>pointDotRadius: 10,
</span>  <span>bezierCurve: false,
</span>  <span>scaleShowVerticalLines: false,
</span>  <span>scaleGridLineColor: 'black'
</span><span>});</span>

登录后复制

这是条形图演示：

请参阅codepen上的sitepoint（@sitepoint）的笔图表。

结论

>本教程介绍了Chart.js的一些重要功能。第一个示例证明了使用一些全局设置。但是，Chart.js还提供了特定于图表类型的自定义选项。如果图表已经可用，则该库允许您创建自己的图表类型。我建议您仔细阅读文档，以便您可以很好地掌握您可以使用此图书馆的内容。

经常询问的问题（常见问题解答）关于带有图表的精美响应图。

>如何使我的Chart.js图表完全响应？

>使您的Chart.js图表完全响应措施涉及将响应式配置选项设置为true。这允许当窗口大小更改时图表大小。您可以通过将以下代码添加到图表配置中来做到这一点：

var mychart = new Chart（CTX，{
type：'bar'，
data：data，data，
选项： {
响应：true
}
}）;
此代码将确保您的图表在窗口大小变化时会调整其大小，以确保完全响应Design。

为什么我的Chart.js图表无法正确调整大小？

如果您的Chart.js图表未正确调整大小，则可能是由于一些原因所致。一个常见的问题是，包含图表的帆布元素无法正确调整大小。确保帆布元件具有相对位置，宽度和高度为100％。另一个问题可能是图表配置中的响应式选项未设置为true。检查您的图表配置以确保正确设置响应选项。

>如何自定义图表的外观。图表的外观。您可以自定义颜色，标签，工具提示等。例如，要在条形图中自定义条形的颜色，您可以使用以下代码：

var mychart = new Chart（CTX，{

type：'bar'，

data ：{

>数据集：[{
backgroundColor：'rgba（75，192，192，0.2）'
}]
}
}）;
此代码将条形的背景颜色设置为浅蓝色。您可以使用类似的选项自定义图表外观的许多其他方面。

>如何将工具提示添加到我的Chart.js Chart？

>
tooltips in Chart.js中的tooltips默认启用，并且当您悬停在图表上的数据点上时会出现。您可以使用工具提示配置选项自定义工具提示的外观和行为。例如，要更改工具提示的背景颜色，您可以使用以下代码：

var mychart = new Chart（CTX，{
type：'bar'，
data：data：data：data：data，
options：{
tooltips：{
backgroundColor：'rgba（0，0，0，0，0.8）'
}
> }

}）;

此代码将将工具提示的背景颜色设置为半透明的黑色。您可以使用类似的选项自定义工具提示的许多其他方面。

>如何将动画添加到我的图表。。您可以使用动画配置选项来控制动画的持续时间，宽松功能和其他方面。例如，要使用2000毫秒和``EaseoutBounce''的宽松函数的持续时间对图表进行动画动画，您可以使用以下代码：

var mychart = new Chart = new Chart（ctx，{
type：''' bar'，
数据：data，
选项：{ 'liseOutBounce'
}
}
}）; 此代码将在2秒钟内以弹跳效应为图表动画。您可以使用类似的选项自定义动画的许多其他方面。

以上是幻想，响应式图表。的详细内容。更多信息请关注PHP中文网其他相关文章！