加入收藏 | 设为首页 | 会员中心 | 我要投稿 青岛站长网 （https://www.0532zz.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 服务器 > 搭建环境 > Windows > 正文

最好的3个开源JavaScript图表库

发布时间：2018-10-06 17:16:55 所属栏目：Windows 来源：Dr.michael J.garbade
导读：【新品产上线啦】51CTO播客，随时随地，碎片化学习 图表及其它可视化方式让传递数据的信息变得更简单。 对于数据可视化和制作精美网站来说，图表和图形很重要。视觉上的展示让分析大块数据及传递信息变得更简单。JavaScript 图表库能让数据以极好的、易于理
副标题[/!--empirenews.page--] 【新品产上线啦】51CTO播客，随时随地，碎片化学习

 最好的3个开源JavaScript图表库

图表及其它可视化方式让传递数据的信息变得更简单。

对于数据可视化和制作精美网站来说，图表和图形很重要。视觉上的展示让分析大块数据及传递信息变得更简单。JavaScript 图表库能让数据以极好的、易于理解的和交互的方式进行可视化，还能够优化你的网站设计。

本文会带你学习最好的 3 个开源 JavaScript 图表库。

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.         {
  15.           label: "Number of developers (millions)",
  16.           backgroundColor: ["red", "blue","yellow","green","pink"],
  17.           data: [7,4,6,9,3]
  18.         }
  19.       ]
  20.     },
  21.     options: {
  22.       legend: { display: false },
  23.       title: {
  24.         display: true,
  25.         text: 'Number of Developers in Every Continent'
  26.       },
  27.  
  28.       scales: {
  29.             yAxes: [{
  30.                 ticks: {
  31.                     beginAtZero:true
  32.                 }
  33.             }]
  34.         } 
  35.     } 
  36. });
  37.     </script>   
  38. </body>
  39. </html>

如你所见，通过设置 type 和 bar 来构造条形图。你可以把条形体的方向改成其他类型 —— 比如把 type 设置成 horizontalBar。

在 backgroundColor 数组参数中提供颜色类型，就可以设置条形图的颜色。

颜色被分配给关联数组中相同索引的标签和数据。例如，第二个标签 “Latin American”，颜色会是 “蓝色（blue）”（第二个颜色），数值是 4（data 中的第二个数字）。

代码的执行结果如下。

最好的3个开源JavaScript图表库

2、 Chartist.js

Chartist.js 是一个简单的 JavaScript 动画库，你能够自制美丽的响应式图表，或者进行其他创作。使用它需要遵循 WTFPL 或者 MIT 协议。

这个库是由一些对现有图表工具不满的开发者进行开发的，它可以为设计师或程序员提供美妙的功能。

在项目中包含 Chartist.js 库后，你可以使用它们来创建各式各样的图表，包括动画，条形图和折线图。它使用 SVG 来动态渲染图表。

（编辑：青岛站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
相关内容
    推荐文章
    站长推荐
    热点阅读

    【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

    建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

    Copygight © 2008-2022 https://www.0532zz.com.cn/ All Rights Reserved. 青岛站长网