引进需要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>


Chart.js报告_5e

<%@ 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>

Chart.js报告_发展趋势_02

<%@ 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>

Chart.js报告_html_03

<%@ 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>

Chart.js报告_2d_04

<%@ 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>

Chart.js报告_html_05

<%@ 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>

Chart.js报告_html_06