chart.js demo

朱雀 2023-02-25 14:24 13阅读 0赞

### chart.js  demo ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTE3Mzc3_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTE3Mzc3_size_16_color_FFFFFF_t_70 1][]

<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>
    		
    		<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.0.0-alpha/Chart.min.js"></script>
    	</head>
     
    	<body>
     
    		<div class="container">
    			<h1 class="text-center">Chart.js</h1>
    		</div>
     
    		<div class="container" style="width:700px;margin:0 auto;">
    			<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 class="col-sm-6">
    					<h2 class="text-center">Bars Chart2</h2>
    					<canvas id="barsChart2"></canvas>
    				</div>
    				
    				<div class="col-sm-6">
    					<h2 class="text-center">Line Chart2</h2>
    					<canvas id="lineChart2"></canvas>
    				</div>
    				
    			</div>
    		</div>
     
    		<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: "red",
    					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","Aug.","Sep.","Oct.","Nov.","Dec."],
    				datasets: [{
    					label: "My First dataset",
    					backgroundColor: [
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(153, 102, 255, 0.8)',
    						'rgba(255, 159, 64, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(153, 102, 255, 0.8)',
    						'rgba(255, 159, 64, 0.8)',
    					],
    					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)',
    						'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,50, 48, 80, 99, 56, 67, 39],
    				}]
    			};
    			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>
    		
    		<script>
    			// Bar Charts2
    			var barChartData = {
    				labels: ["January", "February", "March", "April", "May", "June", "July","Aug.","Sep.","Oct.","Nov.","Dec."],
    				datasets: [{
    					label: "My First dataset",
    					backgroundColor: [
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    						'rgba(255, 99, 132, 0.8)',
    					],
    					data: [65, 59, 80, 81, 56, 55, 40,50, 48, 80, 99, 56, 67, 39],
    				},
    				{
    					label: "My Second dataset",
    					backgroundColor: [
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(54, 162, 235, 0.6)',
    						'rgba(54, 162, 235, 0.6)',
    					],
    					data: [49, 65, 65, 88, 76, 59, 80,97, 87, 56, 68, 85, 65, 80],
    				},
    				{
    					label: "My Third dataset",
    					backgroundColor: [
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(255, 206, 86, 0.8)',
    						'rgba(255, 206, 86, 0.8)',
    					],
    					data: [65, 76, 59, 99, 66, 78, 55,77, 45, 77, 84, 59, 64, 89],
    				},
    				{
    					label: "My Forth dataset",
    					backgroundColor: [
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    						'rgba(75, 192, 192, 0.8)',
    					],
    					data: [55, 76, 85, 45, 64, 12, 44,70, 88, 56, 46, 70, 55, 64],
    				}
    				]
    			};
    			var ctx = document.getElementById("barsChart2").getContext("2d");
    			var BarChart = new Chart(ctx, {
    				type: 'bar',
    				data: barChartData,
    				responsive: true
    			});
    			
    			// Data for line charts2
    			var lineChartData = {
    				labels: ["January", "February", "March", "April", "May", "June", "July"],
    				datasets: [{
    					label: "My First dataset",
    					fill: false,
    					lineTension: 0.1,
    					borderColor: "rgba(75,192,192,0.4)",//线条颜色
    					pointBackgroundColor: "red",//鼠标移动上去的背景颜色
    					borderCapStyle: 'butt',
    					borderDash: [],
    					borderDashOffset: 0.0,
    					borderJoinStyle: 'miter',
    					pointBorderWidth: 3,
    					pointHoverRadius: 5,
    					pointHoverBorderWidth: 2,
    					pointRadius: 1,
    					pointHitRadius: 10,
    					data: [65, 78, 88, 102, 137, 152, 169],
    					spanGaps: false,
    				},{
    					label: "My Second dataset",
    					fill: false,
    					lineTension: 0.1,
    					borderColor: "rgba(255, 206, 86, 0.8)",//线条颜色
    					pointBackgroundColor: "red",//鼠标移动上去的背景颜色
    					borderCapStyle: 'butt',
    					borderDash: [],
    					borderDashOffset: 0.0,
    					borderJoinStyle: 'miter',
    					pointBorderWidth: 3,
    					pointHoverRadius: 5,
    					pointHoverBorderWidth: 2,
    					pointRadius: 1,
    					pointHitRadius: 10,
    					data: [35, 45, 66, 79, 99, 110, 140],
    					spanGaps: false,
    				},{
    					label: "My Third dataset",
    					fill: false,
    					lineTension: 0.1,
    					borderColor: "rgba(255, 99, 132, 0.8)",//线条颜色
    					pointBackgroundColor: "red",//鼠标移动上去的背景颜色
    					borderCapStyle: 'butt',
    					borderDash: [],
    					borderDashOffset: 0.0,
    					borderJoinStyle: 'miter',
    					pointBorderWidth: 3,
    					pointHoverRadius: 5,
    					pointHoverBorderWidth: 2,
    					pointRadius: 1,
    					pointHitRadius: 10,
    					data: [55, 86, 97, 130, 156, 159, 149],
    					spanGaps: false,
    				}]
    			};
    			var ctx = document.getElementById("lineChart2").getContext("2d");
    			var LineChart = new Chart(ctx, {
    				type: 'line',
    				data: lineChartData,
    				responsive: true,
    				bezierCurve: false
    			});
    		</script>
    		
    	</body>
     
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTE3Mzc3_size_16_color_FFFFFF_t_70]: /images/20230209/8322f8feda0f4f13af6df15d260b1157.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI3NTE3Mzc3_size_16_color_FFFFFF_t_70 1]: /images/20230209/3ea84b13fe4046fba32a2fe0cc8ecf58.png