图表Chart.js入门教程（附代码）包括线性、柱状、圆形、饼形图

本文链接：https://blog.csdn.net/adam8813/article/details/103177952

官网：http://www.chartjs.org/

Github：https://github.com/chartjs/Chart.js

使用方法：

1，在页面中创建一个canvas画布
<div id="echartsShow" style="height:350px;width:800px;padding:50px 50px 50px 50px">

<script src="js/echarts.js"></script>

Chart.js可到官网下载最新版Chart.js或者使用Chart.js cdn

3，在页面添加一段初始化脚本可以访问网址：javacto.taobao.com

全部代码+效果如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<!--Echarts使用JS包的导入和前台图表界面的初步实现-->
	<!--1. 引入Echarts.js -->
	<script src="js/echarts.js"></script>
	<script>
		/*页面加载后执行的函数*/
		window.onload = function(){
			Charts();
		}

		function Charts() {
			//初始化Echarts控件
			var myChart = echarts.init(document.getElementById('echartsShow'));
			//清除myCharts展示（重新加载数据时最好加上）
			myChart.clear();
			// 显示标题，图例和空的坐标轴
			myChart.setOption({
				tooltip: {
					show: true
				},
				legend: {
					data: ['成绩']
				},
				xAxis: [{
					type: 'category',
					data: ["语文", "数学", "英语", "化学", "物理", "生物"]
				}],
				yAxis: [{
					type: 'value'
				}],
				series: [{
					"name": "成绩",
					"type": "bar",
					"data": [100, 95, 50, 88, 82, 95]
				}]
			});
		}
	</script>

	<body>
		<!--准备一个容器用于图表的展示-->
		<div id="echartsShow" style="height:350px;width:800px;padding:50px 50px 50px 50px">
	</body>

</html>

这是第二个案例:分别是线性、柱状、圆形、饼形图。效果如下图

可以访问网址：javacto.taobao.com

<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<title>Chart.js - Html5 chart plugins</title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
		<!--<script src="js/echarts.js"></script>-->
	</head>

	<body>

		<div class="container">
			<h1 class="text-center">Chart.js</h1>
		</div>

		<div class="container">
			<div class="row">
				<div class="col-sm-6">
					<h2 class="text-center">Line Chart</h2>
					<canvas id="lines-graph"></canvas>
				</div>
				<div class="col-sm-6">
					<h2 class="text-center">Bars Chart</h2>
					<canvas id="bars-graph"></canvas>
				</div>
				<div class="w-100"></div>
				<div class="col-sm-6">
					<h2 class="text-center">Pie Charts</h2>
					<canvas id="pie-graph"></canvas>
				</div>
				<div class="col-sm-6">
					<h2 class="text-center">Doughnut Charts</h2>
					<canvas id="doughnut-graph"></canvas>
				</div>
			</div>
		</div>

		<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
		<script>
			// Data for line charts
			var lineChartData = {
				labels: ["January", "February", "March", "April", "May", "June", "July"],
				datasets: [{
					label: "My First dataset",
					fill: false,
					lineTension: 0.1,
					backgroundColor: "rgba(75,192,192,0.4)",
					borderColor: "rgba(75,192,192,1)",
					borderCapStyle: 'butt',
					borderDash: [],
					borderDashOffset: 0.0,
					borderJoinStyle: 'miter',
					pointBorderColor: "rgba(75,192,192,1)",
					pointBackgroundColor: "#fff",
					pointBorderWidth: 1,
					pointHoverRadius: 5,
					pointHoverBackgroundColor: "rgba(75,192,192,1)",
					pointHoverBorderColor: "rgba(220,220,220,1)",
					pointHoverBorderWidth: 2,
					pointRadius: 1,
					pointHitRadius: 10,
					data: [65, 59, 80, 81, 56, 55, 40],
					spanGaps: false,
				}]
			};
			var ctx = document.getElementById("lines-graph").getContext("2d");
			var LineChart = new Chart(ctx, {
				type: 'line',
				data: lineChartData,
				responsive: true,
				bezierCurve: false
			});
			// Bar Charts
			var barChartData = {
				labels: ["January", "February", "March", "April", "May", "June", "July"],
				datasets: [{
					label: "My First dataset",
					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,
					data: [65, 59, 80, 81, 56, 55, 40],
				}]
			};
			var ctx = document.getElementById("bars-graph").getContext("2d");
			var BarChart = new Chart(ctx, {
				type: 'bar',
				data: barChartData,
				responsive: true
			});
			// Data for pie chart
			var pieData = {
				labels: [
					"Red",
					"Blue",
					"Yellow"
				],
				datasets: [{
					data: [300, 50, 100],
					backgroundColor: [
						"#FF6384",
						"#36A2EB",
						"#FFCE56"
					],
					hoverBackgroundColor: [
						"#FF6384",
						"#36A2EB",
						"#FFCE56"
					]
				}]
			};
			var ctx = document.getElementById("pie-graph").getContext("2d");
			var PieChart = new Chart(ctx, {
				type: 'pie',
				data: pieData
			});
			// Data for doughnut chart
			var doughnutData = {
				labels: [
					"Red",
					"Blue",
					"Yellow"
				],
				datasets: [{
					data: [300, 50, 100],
					backgroundColor: [
						"#FF6384",
						"#36A2EB",
						"#FFCE56"
					],
					hoverBackgroundColor: [
						"#FF6384",
						"#36A2EB",
						"#FFCE56"
					]
				}]
			};
			var ctx = document.getElementById("doughnut-graph").getContext("2d");
			var DoughnutChart = new Chart(ctx, {
				type: 'doughnut',
				data: doughnutData,
				responsive: true
			});
		</script>
	</body>

</html>