引进需要Chart.js
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
<legend>发货趋势</legend>
<canvas id="bar" height="400" width="821"></canvas>
<script>
var barChartData = {
labels : [ "7月20日", "7月21日", "7月22日", "7月23日", "7月24日", "7月25日",
"7月26日" ],
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 ctx = document.getElementById("bar").getContext("2d");
var myNewChart = new Chart(ctx).Bar(barChartData);
//new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);
</script>
</body>
</html>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
<legend>发展趋势</legend>
<canvas id="bar" height="400" width="821"></canvas>
<script>
var data = {
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 ctx = document.getElementById("bar").getContext("2d");
var myNewChart = new Chart(ctx).Line(data);
</script>
</body>
</html>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
<legend>发展趋势</legend>
<canvas id="bar" height="400" width="821"></canvas>
<script>
var data = {
labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],
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 ctx = document.getElementById("bar").getContext("2d");
var myNewChart = new Chart(ctx).Radar(data);
</script>
</body>
</html>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
<legend>发展趋势</legend>
<canvas id="bar" height="400" width="821"></canvas>
<script>
var data = [
{
value : 30,
color: "#D97041"
},
{
value : 90,
color: "#C7604C"
},
{
value : 24,
color: "#21323D"
},
{
value : 58,
color: "#9D9B7F"
},
{
value : 82,
color: "#7D4F6D"
},
{
value : 8,
color: "#584A5E"
}
];
var ctx = document.getElementById("bar").getContext("2d");
var myNewChart = new Chart(ctx).PolarArea(data);
</script>
</body>
</html>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
<legend>发展趋势</legend>
<canvas id="bar" height="400" width="821"></canvas>
<script>
var data = [
{
value: 30,
color:"#F38630"
},
{
value : 50,
color : "#E0E4CC"
},
{
value : 100,
color : "#69D2E7"
}
];
var ctx = document.getElementById("bar").getContext("2d");
var myNewChart = new Chart(ctx).Pie(data);
</script>
</body>
</html>
<%@ page language="java" pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>报表</title>
<script src="js/Chart.js"></script>
</head>
<body>
<legend>发展趋势</legend>
<canvas id="bar" height="400" width="821"></canvas>
<script>
var data = [
{
value: 30,
color:"#F7464A"
},
{
value : 50,
color : "#E2EAE9"
},
{
value : 100,
color : "#D4CCC5"
},
{
value : 40,
color : "#949FB1"
},
{
value : 120,
color : "#4D5360"
}
];
var ctx = document.getElementById("bar").getContext("2d");
var myNewChart = new Chart(ctx).Doughnut(data);
</script>
</body>
</html>
版权声明：本文博客原创文章，博客，未经同意，不得转载。