前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >3个顶级开源JavaScript图表库【Programming(JavaScript)】

3个顶级开源JavaScript图表库【Programming(JavaScript)】

作者头像
Potato
修改2019-11-25 15:11:54
4K0
修改2019-11-25 15:11:54
举报
文章被收录于专栏:Opensource翻译专栏

图表和其他可视化文件使从数据中传达信息变得更加容易。

图片来源:LubosHouska via Pixabay, CC0
图片来源:LubosHouska via Pixabay, CC0

图表对于数据的可视化和网站的吸引力非常重要。可视化演示使得分析大块数据和传达信息变得更加容易。 图表库使您能够以一种令人惊叹的、易于理解的和交互式的方式可视化数据,并改进您的网站设计。

在本文中,您将可以了解三个顶级的开源JavaScript图表库。

1. Chart.js

Chart.js是一个开放源代码的JavaScript库,可让您在应用程序上创建动画,精美和交互式的图表。它可以在 MIT 许可下使用。

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

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

代码语言:javascript
复制
<!DOCTYPE html>
 <html>
 <head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
 </head>
 
 <body>
  
  <canvas id="bar-chart" width=300" height="150"></canvas>
 
  
     <script>
  
 new Chart(document.getElementById("bar-chart"), {
     type: 'bar',
     data: {
       labels: ["North America", "Latin America", "Europe", "Asia", "Africa"],
       datasets: [
         {
           label: "Number of developers (millions)",
           backgroundColor: ["red", "blue","yellow","green","pink"],
           data: [7,4,6,9,3]
         }
       ]
     },
     options: {
       legend: { display: false },
       title: {
         display: true,
         text: 'Number of Developers in Every Continent'
       },
 
       scales: {
             yAxes: [{
                 ticks: {
                     beginAtZero:true
                 }
             }]
         }
 
     }
 
 
 });
 
     </script>
  
  
 </body>
 </html>

从该代码中可以看到,条形图是通过将type设置为bar来构造的。 您可以将条的方向更改为其他类型,例如将type设置为horizo​​ntalBar。

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

将颜色分配给标签和数据,这些标签和数据在其对应的数组中共享相同的索引。 例如,第二个标签“ Latin America”将设置为“ blue”(第二个颜色)和4(数据中的第二个数字)。

这是此代码的输出。

2. Chartist.js

Chartist.js是一个简单的JavaScript动画库,可让您创建可自定义且美观的响应式图表和其他设计。开放源码库可以在 WTFPL 或 MIT 许可证下使用。

这个库是由一群对现有图表工具不满意的开发人员开发的,所以它为设计人员和开发人员提供了很好的功能。

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

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

代码语言:javascript
复制
<!DOCTYPE html>
 <html>
 <head>
  
  <link href="https//cdn.jsdelivr.net/chartist.js/latest/chartist.min.css" rel="stylesheet" type="text/css" />
  
  <style>
         .ct-series-a .ct-slice-pie {
             fill: hsl(100, 20%, 50%); /* filling pie slices */
             stroke: white; /*giving pie slices outline */ 
             stroke-width: 5px; /* outline width */
  }
 
           .ct-series-b .ct-slice-pie {
             fill: hsl(10, 40%, 60%);
             stroke: white;
             stroke-width: 5px;
  }
 
           .ct-series-c .ct-slice-pie {
             fill: hsl(120, 30%, 80%);
             stroke: white;
             stroke-width: 5px;
  }
 
           .ct-series-d .ct-slice-pie {
             fill: hsl(90, 70%, 30%);
             stroke: white;
             stroke-width: 5px;
  }
           .ct-series-e .ct-slice-pie {
             fill: hsl(60, 140%, 20%);
             stroke: white;
             stroke-width: 5px;
  }
 
  </style>
  </head>
 
 <body>
 
  <div class="ct-chart ct-golden-section"></div>
 
  <script src="https://cdn.jsdelivr.net/chartist.js/latest/chartist.min.js"></script>
 
  <script>
  
  var data = {
             series: [45, 35, 20]
  };
 
  var sum = function(a, b) { return a + b };
 
  new Chartist.Pie('.ct-chart', data, {
         labelInterpolationFnc: function(value) {
  return Math.round(value / data.series.reduce(sum) * 100) + '%';
  }
  });
  </script>
 </body>
 </html>

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

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

要对各种饼图分区进行样式化,可以使用默认值 .ct-series-a类。每个系列计数(a,b,c等)都会对字母a进行迭代,以使其与要设置样式的切片相对应。

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

这是代码的输出。

3. D3.js

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

您可以使用这个令人惊叹的3D动画库来用HTML5,SVG和CSS可视化数据,并使您的网站更具吸引力。本质上,D3使您可以将数据绑定到文档对象模型(DOM),然后使用基于数据的功能对文档进行更改。

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

代码语言:javascript
复制
<!DOCTYPE html>
 <html>
 <head>
  
  <style>
     .chart div {
       font: 15px sans-serif;
       background-color: lightblue;
       text-align: right;
       padding:5px;
       margin:5px;
       color: white;
       font-weight: bold;
  }
  
  </style>
  </head>
 
 <body>
 
  <div class="chart"></div>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.5.0/d3.min.js"></script>
 
  <script>
 
  var data = [342,222,169,259,173];
 
       d3.select(".chart")
         .selectAll("div")
         .data(data)
           .enter()
           .append("div")
           .style("width", function(d){ return d + "px"; })
           .text(function(d) { return d; });
  
  
  </script>
 </body>
 </html>

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

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

下面是代码的输出。

结语

JavaScript图表库为您提供了用于在网络媒体资源上实现数据可视化的强大工具。 使用这三个开源库,您可以增强网站的美观性和交互性。

您知道别的用于创建JavaScript动画效果的前端库吗? 请在下面的评论部分告诉我们。

LiveEdu.tv培训提供了一种了解JavaScript的方法。

本文系外文翻译,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系外文翻译前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. Chart.js
  • 2. Chartist.js
  • 3. D3.js
  • 结语
相关产品与服务
容器服务
腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档