bootstrap3 char.js 使用

最新推荐文章于 2024-05-23 11:50:43 发布

xuezaifei66

最新推荐文章于 2024-05-23 11:50:43 发布

阅读量850

点赞数 1

本文提供了一个使用Bootstrap和相关JavaScript库（如Chart.js）创建图表的模板，包括折线图、饼图、柱状图、环形图和极坐标图。通过简单的HTML和JavaScript代码，实现动态数据可视化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-2.0.3.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/Chart.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
	$(function() {
		var doughnutData = [ {
			value : 30,
			color : "#F7464A"
		}, {
			value : 50,
			color : "#46BFBD"
		}, {
			value : 100,
			color : "#FDB45C"
		}, {
			value : 40,
			color : "#949FB1"
		}, {
			value : 120,
			color : "#4D5360"
		}

		];

		var myDoughnut = new Chart(document.getElementById("donut-chart")
				.getContext("2d")).Doughnut(doughnutData);

		var lineChartData = {
			labels : [ "January", "February", "March", "April", "May", "June",
					"July" ],
			datasets : [ {
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				pointColor : "rgba(220,220,220,1)",
				pointStrokeColor : "#fff",
				data : [ 65, 59, 90, 81, 56, 55, 40 ]
			}, {
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				pointColor : "rgba(151,187,205,1)",
				pointStrokeColor : "#fff",
				data : [ 28, 48, 40, 19, 96, 27, 100 ]
			} ]

		}

		var myLine = new Chart(document.getElementById("area-chart")
				.getContext("2d")).Line(lineChartData);

		var barChartData = {
			labels : [ "January", "February", "March", "April", "May", "June",
					"July" ],
			datasets : [ {
				fillColor : "rgba(220,220,220,0.5)",
				strokeColor : "rgba(220,220,220,1)",
				data : [ 65, 59, 90, 81, 56, 55, 40 ]
			}, {
				fillColor : "rgba(151,187,205,0.5)",
				strokeColor : "rgba(151,187,205,1)",
				data : [ 28, 48, 40, 19, 96, 27, 100 ]
			} ]

		}

		var myLine = new Chart(document.getElementById("bar-chart").getContext(
				"2d")).Bar(barChartData);

		var pieData = [ {
			value : 30,
			color : "#F38630"
		}, {
			value : 50,
			color : "#E0E4CC"
		}, {
			value : 100,
			color : "#69D2E7"
		}

		];

		var myPie = new Chart(document.getElementById("pie-chart").getContext(
				"2d")).Pie(pieData);

		var chartData = [ {
			value : Math.random(),
			color : "#D97041"
		}, {
			value : Math.random(),
			color : "#C7604C"
		}, {
			value : Math.random(),
			color : "#21323D"
		}, {
			value : Math.random(),
			color : "#9D9B7F"
		}, {
			value : Math.random(),
			color : "#7D4F6D"
		}, {
			value : Math.random(),
			color : "#584A5E"
		} ];
		var myPolarArea = new Chart(document.getElementById("line-chart")
				.getContext("2d")).PolarArea(chartData);

	});
</script>
</head>
<body>
	<table>
		<tr>
			<td><canvas id="area-chart" class="chart-holder" width="538"
					height="250"></canvas></td>
			<td><canvas id="donut-chart" class="chart-holder" width="538"
					height="250"></canvas></td>
		</tr>
		<tr>
			<td><canvas id="bar-chart" class="chart-holder" width="538"
					height="250"></canvas></td>
			<td><canvas id="pie-chart" class="chart-holder" width="538"
					height="250"></canvas></td>
		</tr>
		<tr>
			<td><canvas id="line-chart" class="chart-holder" width="538"
					height="250"></canvas></td>
			
		</tr>
	</table>


</body>

</html>