欢迎访问悦橙教程（wld5.com），关注java教程。悦橙教程  java问答|  每日更新
页面导航 : > > 文章正文

Chart.js报表制作，chart.js报表

来源： javaer 分享于  点击 42702 次 点评：177

Chart.js报表制作，chart.js报表


[java] view plaincopy
  1. 引入Chart.js  

[java] view plaincopy
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发货趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.         var barChartData = {  
  13.             labels : [ "7月20日", "7月21日", "7月22日", "7月23日", "7月24日", "7月25日",  
  14.                     "7月26日" ],  
  15.             datasets : [ {  
  16.                 fillColor : "rgba(220,220,220,0.5)",  
  17.                 strokeColor : "rgba(220,220,220,1)",  
  18.                 data : [ 65, 59, 90, 81, 56, 55, 40 ]  
  19.             }, {  
  20.                 fillColor : "rgba(151,187,205,0.5)",  
  21.                 strokeColor : "rgba(151,187,205,1)",  
  22.                 data : [ 28, 48, 40, 19, 96, 27, 100 ]  
  23.             } ]  
  24.         };  
  25.   
  26.       
  27.         var ctx = document.getElementById("bar").getContext("2d");  
  28.         var myNewChart = new Chart(ctx).Bar(barChartData);  
  29.         //new Chart(document.getElementById("bar").getContext("2d")).Bar(barChartData);  
  30.     </script>  
  31. </body>  
  32. </html>  

[java] view plaincopy
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发展趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.     var data = {  
  13.             labels : ["January","February","March","April","May","June","July"],  
  14.             datasets : [  
  15.                 {  
  16.                     fillColor : "rgba(220,220,220,0.5)",  
  17.                     strokeColor : "rgba(220,220,220,1)",  
  18.                     pointColor : "rgba(220,220,220,1)",  
  19.                     pointStrokeColor : "#fff",  
  20.                     data : [65,59,90,81,56,55,40]  
  21.                 },  
  22.                 {  
  23.                     fillColor : "rgba(151,187,205,0.5)",  
  24.                     strokeColor : "rgba(151,187,205,1)",  
  25.                     pointColor : "rgba(151,187,205,1)",  
  26.                     pointStrokeColor : "#fff",  
  27.                     data : [28,48,40,19,96,27,100]  
  28.                 }  
  29.             ]  
  30.         };  
  31.   
  32.       
  33.         var ctx = document.getElementById("bar").getContext("2d");  
  34.         var myNewChart = new Chart(ctx).Line(data);  
  35.           
  36.     </script>  
  37. </body>  
  38. </html>  

[java] view plaincopy
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发展趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.     var data = {  
  13.             labels : ["Eating","Drinking","Sleeping","Designing","Coding","Partying","Running"],  
  14.             datasets : [  
  15.                 {  
  16.                     fillColor : "rgba(220,220,220,0.5)",  
  17.                     strokeColor : "rgba(220,220,220,1)",  
  18.                     pointColor : "rgba(220,220,220,1)",  
  19.                     pointStrokeColor : "#fff",  
  20.                     data : [65,59,90,81,56,55,40]  
  21.                 },  
  22.                 {  
  23.                     fillColor : "rgba(151,187,205,0.5)",  
  24.                     strokeColor : "rgba(151,187,205,1)",  
  25.                     pointColor : "rgba(151,187,205,1)",  
  26.                     pointStrokeColor : "#fff",  
  27.                     data : [28,48,40,19,96,27,100]  
  28.                 }  
  29.             ]  
  30.         };  
  31.   
  32.       
  33.         var ctx = document.getElementById("bar").getContext("2d");  
  34.         var myNewChart = new Chart(ctx).Radar(data);  
  35.           
  36.     </script>  
  37. </body>  
  38. </html>  

[java] view plaincopy
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发展趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.     var data = [  
  13.                 {  
  14.                     value : 30,  
  15.                     color: "#D97041"  
  16.                 },  
  17.                 {  
  18.                     value : 90,  
  19.                     color: "#C7604C"  
  20.                 },  
  21.                 {  
  22.                     value : 24,  
  23.                     color: "#21323D"  
  24.                 },  
  25.                 {  
  26.                     value : 58,  
  27.                     color: "#9D9B7F"  
  28.                 },  
  29.                 {  
  30.                     value : 82,  
  31.                     color: "#7D4F6D"  
  32.                 },  
  33.                 {  
  34.                     value : 8,  
  35.                     color: "#584A5E"  
  36.                 }  
  37.             ];  
  38.   
  39.       
  40.         var ctx = document.getElementById("bar").getContext("2d");  
  41.         var myNewChart = new Chart(ctx).PolarArea(data);  
  42.           
  43.     </script>  
  44. </body>  
  45. </html>  

[java] view plaincopy
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发展趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.     var data = [  
  13.                 {  
  14.                     value: 30,  
  15.                     color:"#F38630"  
  16.                 },  
  17.                 {  
  18.                     value : 50,  
  19.                     color : "#E0E4CC"  
  20.                 },  
  21.                 {  
  22.                     value : 100,  
  23.                     color : "#69D2E7"  
  24.                 }             
  25.             ];  
  26.   
  27.       
  28.         var ctx = document.getElementById("bar").getContext("2d");  
  29.         var myNewChart = new Chart(ctx).Pie(data);  
  30.           
  31.     </script>  
  32. </body>  
  33. </html>  

[java] view plaincopy
  1. <%@ page language="java" pageEncoding="UTF-8"%>  
  2. <!DOCTYPE HTML>  
  3. <html>  
  4. <head>  
  5. <title>报表</title>  
  6. <script src="js/Chart.js"></script>  
  7. </head>  
  8. <body>  
  9.     <legend>发展趋势</legend>  
  10.     <canvas id="bar" height="400" width="821"></canvas>  
  11.     <script>  
  12.     var data = [  
  13.                 {  
  14.                     value: 30,  
  15.                     color:"#F7464A"  
  16.                 },  
  17.                 {  
  18.                     value : 50,  
  19.                     color : "#E2EAE9"  
  20.                 },  
  21.                 {  
  22.                     value : 100,  
  23.                     color : "#D4CCC5"  
  24.                 },  
  25.                 {  
  26.                     value : 40,  
  27.                     color : "#949FB1"  
  28.                 },  
  29.                 {  
  30.                     value : 120,  
  31.                     color : "#4D5360"  
  32.                 }  
  33.   
  34.             ];  
  35.         var ctx = document.getElementById("bar").getContext("2d");  
  36.         var myNewChart = new Chart(ctx).Doughnut(data);  
  37.           
  38.     </script>  
  39. </body>  
  40. </html>  


相关文章

    暂无相关文章
相关栏目：

相关文章

用户点评