JavaScript Chart.js

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

什么是HTML5画布元素呢？

HTML5元素为使用JavaScript绘制图形提供了一种简单而强大的方式。它可以用来画图，制作照片组合或做简单（或不太简单）的动画。
它是响应性的，这意味着它在调整窗口大小时重新绘制图表，以获得完美的比例粒度。

这个库支持8种不同类型的图形。

Line
Bar
Doughnut
Pie
Radar
极地地区
Bubble
Scatter

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

创建图表的步骤：
1. 首先在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>

创建画布。为了创建一个图表，我们需要表示图表类。为了做到这一点，我们需要将jQuery实例或2d上下文传递给我们想要放置或绘制图表的画布。

例如:

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

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

例如:
“`例如
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)'
            ]

<pre><code class=" line-numbers"><br />最后，我们应该决定图表的类型，包括线图、条形图、雷达图、饼图、甜甜圈图、极区图、气泡图和散点图。

4.创建一个图形。在定义了要画什么类型的图后，把我们要可视化的数据传给该图。下面是一个例子。
“`javascript
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