bootstrap3 char.js 使用

来源：互联网发布：湖南省软件协会编辑：程序博客网时间：2024/05/19 06:47
<%@ 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>
1 0