4个顶级开源JavaScript图表库

时间：2021-08-29 来源：互联网编辑：宝哥软件园浏览：次

图表对于可视化数据和使网站具有吸引力非常重要。可视化表示使分析大块数据和传达信息变得更加容易。JavaScript图表库使您能够以易于理解和交互的方式可视化数据，并改进网站的设计。有四个顶级开源JavaScript图表库，一定要拿到！

1.图表. js

Chart.js是一个开源的JavaScript库，允许您在应用程序上创建动画的、漂亮的和交互式的图表。它可以在麻省理工学院的许可下获得。

使用Chart.js，您可以创建各种令人印象深刻的图表和图形，包括条形图、折线图、面积图、线性比例尺和散点图。它完全响应各种设备，并用HTML5 Canvas元素进行渲染。

以下是使用库绘制条形图的示例代码。在这个例子中，我们将使用Chart.js内容交付网络(CDN)来包含它。请注意，所使用的数据仅用于说明目的。

！DOCTYPE htmlhtmlheadscript src=' http :https://cdnjs . cloudflare.com/Ajax/libs/Chart . js/2 . 5 . 0/Chart . min . js '/script/headsdycanvas id=' bar-Chart ' width=300 ' height=' 150 '/拉票说明Chart(document . getelementbyid(' bar-Chart ')，{type: 'bar '，data: { labels:/script/body/html从这段代码中可以看出，条形图是通过将类型设置为bar来构建的。您可以将栏的方向更改为其他类型，例如将类型设置为水平栏。

通过在backgroundColor数组参数中提供颜色类型来设置条形图的颜色。

颜色被分配给在相应数组中共享相同索引的标签和数据。例如，拉丁美洲的第二个标签将设置为蓝色(第二种颜色)和4(数据中的第二个数字)。

这是这段代码的输出

2.Chartist.js

Chartist.js是一个简单的JavaScript动画库，它允许您创建可定制的漂亮的响应图表和其他设计。开源库可以在WTFPL或MIT许可下获得。

该库是由一群对现有图表工具不满意的开发人员开发的，因此为设计人员和开发人员提供了出色的功能。

项目包含Chartist.js库及其CSS文件后，您可以使用它们创建各种类型的图表，包括动画、条形图和折线图。它使用SVG动态呈现图表。

下面是使用库绘制饼图的代码示例

link href=' https//cdn . jsdeliver . net/chart ist . js/latest/chart ist . min . CSS ' rel=' external no follow ' rel='样式表' type=' text/CSS '/style . CT-series-a . CT-slice-pie { fill : HSL(100，20%，50%)；/*填充派片*/stroke:白色；/*给出饼图切片轮廓*/笔画宽度： 5px；/*轮廓宽度*/}。ct系列b .ct切片派{fill: hsl(10，40%，60%)；stroke:白色；笔画宽度： 5px；}.ct系列c .ct切片派{fill: hsl(120，30%，80%)；}.CT-series-d . CT-slice-pie { fill : HSL(90%，70%，30%)；}.CT-series-e . CT-slice-pie { fill : HSL(60，140%，20%)；}/style div CT-golden-section '/div script src=' http :3359 cdn . jsdeliver . net/chart ist . js/latest/chart ist . min . js '/script var data={ series :[45，35，20]}；var sum=函数(a，b){ return a b }；新宪章主义者。派('。ct-chart '，data，{labelInterpolationFnc:函数(值){return Math.round(值/data . series . reduce(sum)* 100)' % '；}});/scriptcharist JavaScript库允许您使用各种预构建的CSS样式，而不是指定项目的各种样式相关组件。您可以使用它们来控制创建的图表的外观。

例如，预先创建的CSS类。ct-chart用于构建饼图的容器。此外。ct-golden-section类用于获取长宽比，可以使用响应式设计进行缩放，省去了计算固定尺寸的麻烦。Chartist还提供了您可以在项目中使用的其他类别的容器比率。

要设置各种饼图样式，可以使用默认值。ct系列a级。字母a与每个系列计数(a、b、c等)重复。)以便它对应于要设置样式的切片。

宪章派。饼图方法用于创建饼图。要创建其他类型的图表，如折线图，请使用图表列表。线条

这是代码的输出

3.D3.js

D3.js是另一个很棒的开源JavaScript图表库。它可以在BSD许可下使用。D3主要用于根据提供的数据来操作和添加文档的交互性。

你可以用这个神奇的3D动画库，用HTML5、SVG、CSS把你的数据可视化，让网站更有吸引力。本质上，D3使您能够将数据绑定到文档对象模型，然后使用基于数据的函数来更改文档。

下面是使用库绘制简单条形图的示例代码。chart div {font: 15px无衬线；背景-颜色：浅蓝色；text-align:右侧；padding:5pxmargin:5pxcolor:白色；font-weight:粗体；} div script src=' http :https://cdnjs . cloud flare.com/Ajax/libs/D3/5 . 5 . 0/D3 . min . js ' var data=[342，222，169，259，173]；d3.select('。图表')。选择全部(“div”)。数据(数据)。输入()。追加(' div ')。样式(' width '，函数(d){ return d ' px '；}).text(函数(d){ return d；});使用D3库的主要概念是通过应用CSS样式来选择指向DOM节点的点，然后应用操作符来操作它们，就像在其他DOM框架中一样(比如jQuery)。

数据绑定到文档后。调用enter()函数为传入数据构建一个新节点。后调用的所有方法。将为数据中的每个项目调用enter()函数。

这是代码的输出

4.展示

echart由百度前端技术部开发，是一个纯Javascript的图表库，可以在PC和移动设备上流畅运行，兼容当前大多数浏览器(IE8/9/10/11、Chrome、Firefox、Safari等)。).底层依托轻量级Canvas类库ZRender，提供可视化、生动、交互、高度个性化的数据可视化图表。

E-Charts自适应效果好，e-echart 3增加了更丰富的交互功能和更多的视觉效果，深度优化了移动终端。