解决网 - 电脑技术问题解决基地

词条信息

admin
admin
超级管理员
最近编辑者 发短消息   

相关词条

热门词条

更多>>
笔记本屏幕导致视力下降?
话说《宠物小精灵》有这么一集(电脑战士3D龙),估计大部分人却[详细]
京东会员系统是怎么运营的?
一、会员系统的本质企业经营的目的是利润,而利润源自产品的价值,[详细]
子弹短信靠什么挑战微信?
自8月20日发布以来,短短几天时间,子弹短信就冲到了App S[详细]
边充电边玩手机,消耗的电是手机电池还是充电器?
现在的不管是年轻人还是中年人,都喜欢边充电边玩手机。虽然我们知[详细]
3个“最伤手机”的充电方式
不管是现在的移动互联网时代,还是以前的电力时代,离不开的就是电[详细]
解决网 >>所属分类 >> 程序开发    JavaScript   

3个顶级开源JavaScript图表库

标签: JavaScript 图表库

顶[0] 发表评论(0) 编辑词条

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

目录

1. Chart.js编辑本段回目录

Chart.js是一个开源JavaScript库,允许你在应用程序上创建动画,美观和交互式图表。它可以在MIT许可下获得。

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

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

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script> 
  5. </head> 
  6. <body> 
  7. <canvas id="bar-chart" width=300" height="150"></canvas> 
  8. <script> 
  9. new Chart(document.getElementById("bar-chart"), { 
  10. type: 'bar', 
  11. data: { 
  12. labels: ["North America", "Latin America", "Europe", "Asia", "Africa"], 
  13. datasets: [ 
  14. label: "Number of developers (millions)", 
  15. backgroundColor: ["red", "blue","yellow","green","pink"], 
  16. data: [7,4,6,9,3] 
  17. }, 
  18. options: { 
  19. legend: { display: false }, 
  20. title: { 
  21. display: true, 
  22. text: 'Number of Developers in Every Continent' 
  23. }, 
  24. scales: { 
  25. yAxes: [{ 
  26. ticks: { 
  27. beginAtZero:true 
  28. }] 
  29. }); 
  30. </script> 
  31. </body> 
  32. </html> 

从这段代码中可以看出,通过将类型设置为bar来构造条形图。你可以将条形的方向更改为其他类型,例如将type设置为horizo??ntalBar。

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

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

这是此代码的输出。

2. Chartist.js编辑本段回目录

Chartist.js是一个简单的JavaScript动画库,允许你创建可自定义和美观的响应图表和其他设计。开源库可在WTFPL或MIT许可下获得。

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

在项目中包含Chartist.js库及其CSS文件后,你可以使用它们创建各种类型的图表,包括动画,条形图和折线图。它利用SVG动态渲染图表。

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

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" /> 
  5. <style> 
  6. .ct-series-a .ct-slice-pie { 
  7. fill: hsl(100, 20%, 50%); /* filling pie slices */ 
  8. stroke: white; /*giving pie slices outline */ 
  9. stroke-width: 5px; /* outline width */ 
  10. .ct-series-b .ct-slice-pie { 
  11. fill: hsl(10, 40%, 60%); 
  12. stroke: white; 
  13. stroke-width: 5px; 
  14. .ct-series-c .ct-slice-pie { 
  15. fill: hsl(120, 30%, 80%); 
  16. stroke: white; 
  17. stroke-width: 5px; 
  18. .ct-series-d .ct-slice-pie { 
  19. fill: hsl(90, 70%, 30%); 
  20. stroke: white; 
  21. stroke-width: 5px; 
  22. .ct-series-e .ct-slice-pie { 
  23. fill: hsl(60, 140%, 20%); 
  24. stroke: white; 
  25. stroke-width: 5px; 
  26. </style> 
  27. </head> 
  28. <body> 
  29. <div class="ct-chart ct-golden-section"></div> 
  30. <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script> 
  31. <script> 
  32. var data = { 
  33. series: [45, 35, 20] 
  34. }; 
  35. var sum = function(a, b) { return a + b }; 
  36. new Chartist.Pie('.ct-chart', data, { 
  37. labelInterpolationFnc: function(value) { 
  38. return Math.round(value / data.series.reduce(sum) * 100) + '%'; 
  39. }); 
  40. </script> 
  41. </body> 
  42. </html> 

Chartist JavaScript库允许你使用各种预构建的CSS样式,而不是指定项目的各种与样式相关的组件。你可以使用它们来控制创建的图表的外观。

3个顶级开源JavaScript图表库,前端程序员必备!

例如,预先创建的CSS类.ct-chart用于构建饼图的容器。而且,.ct-golden-section类用于获取宽高比,可以使用响应式设计进行缩放,并为你节省计算固定尺寸的麻烦。Chartist还提供了你可以在项目中使用的其他类别的容器比率。

要设置各种饼图样式,可以使用默认的.ct-series-a类。字母a与每个系列计数(a,b,c等)一起迭代,使得它与要设置样式的切片相对应。

Chartist.Pie方法用于创建饼图。要创建另一种类型的图表,例如折线图,请使用Chartist.Line。

这是代码的输出。

3. D3.js编辑本段回目录

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

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

以下是使用库绘制简单条形图的示例代码。

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <style> 
  5. .chart div { 
  6. font: 15px sans-serif; 
  7. background-color: lightblue; 
  8. text-align: right; 
  9. padding:5px; 
  10. margin:5px; 
  11. color: white; 
  12. font-weight: bold; 
  13. </style> 
  14. </head> 
  15. <body> 
  16. <div class="chart"></div> 
  17. <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script> 
  18. <script> 
  19. var data = [342,222,169,259,173]; 
  20. d3.select(".chart") 
  21. .selectAll("div") 
  22. .data(data) 
  23. .enter() 
  24. .append("div") 
  25. .style("width", function(d){ return d + "px"; }) 
  26. .text(function(d) { return d; }); 
  27. </script> 
  28. </body> 
  29. </html> 

使用D3库的主要概念是首先应用CSS样式选择指向DOM节点,然后应用运算符来操作它们,就像在其他DOM框架(如jQuery)中一样。

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

这是代码的输出。

结语编辑本段回目录

JavaScript图表库为你提供了强大的工具,用于在Web属性上实现数据可视化。通过这三个开源库,你可以增强网站的美感和互动性。你还有其他强大的前端库来创建JavaScript动画效果吗?不妨分享!



 

 

本文地址:解决网 http://www.lwy8.com/doc-view-5340.html

TAGS:SOLVES , 电脑技术 , 电脑知识 , 网站建设, 电脑技术, 网络营销 , 网站托管 , 硬件技术 , 网络技术 , 软件技术, 维修网点


按字母顺序浏览:A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

→我们致力于为广大网民解决所遇到的各种电脑技术问题
 如果您认为本词条还有待完善,请 编辑词条

上一篇网络配置工具和软件
下一篇

0
1. 本站部分内容来自互联网,如有任何版权侵犯或其他问题请与我们联系,我们将立即删除或处理。
2. 本站内容仅供参考,如果您需要解决具体问题,建议您咨询相关领域专业人士。
3. 如果您没有找到需要的电脑技术问题词条,您可以到百科问答提问或创建词条,等待高手解答。

关于本词条的提问

查看全部/我要提问>>