使用Chart.js将数据转换为交互式图表

null

理论上,创建图表并不困难。处理饼图所需的三角函数是培训程序员最常用的工作之一。现在有很多图表库正在争夺开发人员的注意力,但在本文中,我们将重点讨论如何使用开源工具Chart.js。

我们将通过它的步伐,从随机生成的数据创建一组可打印的图表。 Chart.js特别受欢迎网页设计工具因为它在易用性和高级功能之间提供了独特的权衡,使您能够创建交互式图表和参与信息图表

使用Chart.js,您可以选择八种不同的图表类型,只需最少的工作量即可添加到您的网站。最近添加的动画模块使用时髦的视觉效果丰富了图表。让我们开始吧。

单击每个图像右上角的图标将其放大。

01.部署库

由于Chart.js的使用很普遍,您可以从各种CDN(例如Cloudflare)中找到它的缩小版本。只需加载一个

02.开始初始化

首先,加载框架

加载框架时,下一步是让Canvas2D手柄指向在上一步中创建的实例。然后可以使用它来创建新的实例图表()Class,负责数据处理,呈现和交互。

03.添加数据源

对于我们的折线图,只需要一个DataSet

图表类采用提供一个或多个的数据指针数据集包含实际测量信息的对象。在我们的折线图中,只需要一个DataSet。它带有强制性数据元素和一些控制实际显示过程的可选参数。

var chart = new Chart(ctx,{type:'line',options:{},data:{labels:[“January”,“February”,“March”,“April”,“May”,“June”, “七月”],数据集:[{label:“My First dataset”,backgroundColor:'rgb(255,99,132)',borderColor:'rgb(255,99,132)',数据:[0,10, 5,2,20,30,45],}]}});

04.停止任何闪烁

Chart.js带有复杂的调整大小逻辑,不幸的是,它不时会出现错误的屏幕尺寸错误。限制的大小遗憾的是,通过CSS的元素不起作用。相反,必须通过Chart类构造函数附带的选项字段禁用宽高比维护和响应度。

 

08.避免吃馅饼

pie charts taking over the screen

饼图需要特殊处理,如果您不希望它们填满整个屏幕

理论上,饼图可以沿着相同的线条呈现。删除颜色属性以防止出现统一外观,并将type属性设置为pie。遗憾的是,这并没有完全解决 - 完成后,饼图将填满整个屏幕。这是由饼形渲染器的特殊性引起的,它使用两个属性中的“较大”来确定饼形半径。

var mypie = {labels:[“January”,“February”,“March”,“April”,“May”,“June”,“July”],数据集:[{label:“我的第一个数据集”,数据: [0,10,5,2,20,30,45],}]}; ctx = document.getElementById('workArea2')。的getContext( '2D'); chart = new Chart(ctx,{type:'pie',options:{},data:mypie});

09.解决问题

打开在步骤1中创建的'index.js'文件。首先将图形类型指定为行,然后添加要在视觉上表示的数据,如下所示。

 

10.让Chart.js重新缩放图表

另一种解决问题的方法是重新禁用保持纵横比特征。这样,允许图表引擎在其认为合适时重新缩放图表,确保整个圆圈显示在屏幕上。

ctx = document.getElementById('workArea2')。的getContext( '2D'); chart = new Chart(ctx,{type:'pie',options:{maintainAspectRatio:false},data:mypie});

下一页:使用Chart.js完成创建交互式图表



翻译字数超限