3个顶级开源JavaScript图表库【Programming（JavaScript）】

Potato

修改于 2019-11-25 15:11:54

4K0

修改于 2019-11-25 15:11:54

文章被收录于专栏：Opensource翻译专栏

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

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

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

1. Chart.js

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

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

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

<!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设置为horizontalBar。

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

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

这是此代码的输出。

2. Chartist.js

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

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

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

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

<!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），然后使用基于数据的功能对文档进行更改。

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

<!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 ()函数之后调用的所有方法都会调用它。

下面是代码的输出。