JavaScript Chart.js

Chart.js是一个开源的JavaScript库，可以通过使用HTML5画布元素绘制不同类型的图表。由于它使用了画布，所以您必须包含一个polyfill以支持旧的浏览器。

那么，HTML5画布元素是什么？

HTML5元素提供了一种简单而强大的方法来使用JavaScript绘制图形。它可以用于绘制图表、制作照片组合或进行简单（或者不那么简单）的动画。

它是响应式的，这意味着它会在窗口调整大小时重新绘制图表，以实现完美的比例更细。

这个库支持 8种不同类型的图表 ：

折线图
柱状图
甜甜圈图
饼图
雷达图
极地区域图
气泡图
散点图

安装： 最新版本的Chart.js可以从Github下载，或者使用Chart.js CDN。

创建图表的步骤：

首先在HTML中导入 chart.js 。

<head>
<script src= 
"https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"> 
</script> 
<link rel="stylesheet" type="text/css" href="style.css"> 
</head>

创建画布： 为了创建图表，我们需要表示Chart类。为此，我们需要传递jQuery实例或画布的2D上下文，用于放置或绘制图表。

例如：

<canvas id = ”chart” width=”900” height = “900”> </canvas>

图表类型和数据： 决定所需的图表类型，并相应准备数据。数据需要标签、数据集、数据值、背景颜色、边框颜色、边框宽度和其他各种选项。

例如：

labels:[“CS”, “IT” , “ECE” , “EE”, ”ME”, “BE”], 
And datasets:  
    Label: ‘# of students’, 
    Data : [105,124,78,91,62,56], 
    backgroundColor :['rgba(255, 99, 132, 0.2)', 
                'rgba(54, 162, 235, 0.2)', 
                'rgba(255, 206, 86, 0.2)', 
                'rgba(75, 192, 192, 0.2)', 
                'rgba(153, 102, 255, 0.2)', 
                'rgba(255, 159, 64, 0.2)'
], 
  
borderColor: [ 
                'rgba(255,99,132,1)', 
                'rgba(54, 162, 235, 1)', 
                'rgba(255, 206, 86, 1)', 
                'rgba(75, 192, 192, 1)', 
                'rgba(153, 102, 255, 1)', 
                'rgba(255, 159, 64, 1)'
            ]

最后，我们应该从直线，条形，雷达，饼，甜甜圈，极地区域，气泡和散点来决定图表的类型。

创建图表： 定义要绘制的图表类型之后，将要可视化的数据传递给该图表。以下是一个示例：

var ctx = document.getElementById("chart"); 
var myChart = new Chart(ctx, { 
  type: 'bar', 
  data: { 
    labels: ["CS", "IT", "ECE", "EE", "ME", "BE"], 
    datasets: [ 
      { 
       label: '# of students', 
       data: [105, 124, 78, 91, 62, 56], 
       backgroundColor: ['rgba(255, 99, 132, 0.2)', 
                       'rgba(54, 162, 235, 0.2)', 
                       'rgba(255, 206, 86, 0.2)', 
                       'rgba(75, 192, 192, 0.2)', 
                       'rgba(153, 102, 255, 0.2)', 
                       'rgba(255, 159, 64, 0.2)'
                      ], 
       borderColor: ['rgba(255, 99, 132, 1)', 
                     'rgba(54, 162, 235, 1)', 
                     'rgba(255, 206, 86, 1)', 
                     'rgba(75, 192, 192, 1)', 
                     'rgba(153, 102, 255, 1)', 
                     'rgba(255, 159, 64, 1)'
                    ], 
       borderWidth: 1 
      } 
    ] 
   } 
});

创建图表的完整代码：

<!DOCTYPE html> 
<html> 
<head> 
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"> 
</script> 
</head> 
<body> 
  
<canvas id="myChart" width="900" height="400"></canvas> 
<script type="text/javascript"> 
  
var ctx = document.getElementById("myChart"); 
var myChart = new Chart(ctx, { 
  type: 'bar', 
  data: { 
    labels: ["CS", "IT" , "ECE" , "EE", "ME", "BE"], 
    datasets: [ 
      { label: '# of students', 
        data: [105,124,78,91,62,56], 
        backgroundColor :['rgba(255, 99, 132, 0.2)', 
                'rgba(54, 162, 235, 0.2)', 
                'rgba(255, 206, 86, 0.2)', 
                'rgba(75, 192, 192, 0.2)', 
                'rgba(153, 102, 255, 0.2)', 
                'rgba(255, 159, 64, 0.2)' 
], 
  
borderColor: [ 
                'rgba(255,99,132,1)', 
                'rgba(54, 162, 235, 1)', 
                'rgba(255, 206, 86, 1)', 
                'rgba(75, 192, 192, 1)', 
                'rgba(153, 102, 255, 1)', 
                'rgba(255, 159, 64, 1)' 
            ], 
borderWidth : 1 
      } 
    ] 
  }, 
  options: { 
        scales: { 
            yAxes: [{ 
                ticks: { 
                    beginAtZero:true 
                } 
            }] 
        } 
    } 
}); 
  
    </script> 
  
</body> 
</html>

输出:

JavaScript Chart.js