首页 > 代码库 > Chart.js演示7种不同的统计图

Chart.js演示7种不同的统计图

超酷HTML5 Canvas图表应用Chart.js自定义提示折线


实例代码下载

Java代码  技术分享

  1. <div class="htmleaf-container">  

  2.             <div class="htmleaf-content">  

  3.                 <div style="width:30%;margin:0 auto;">  

  4.                     <div>  

  5.                         <canvas id="canvas" height="450" width="600"></canvas>  

  6.                     </div>  

  7.                 </div>  

  8.             </div>  

  9.         </div>  

  10.   

  11.         <script src=http://www.mamicode.com/"/api/jq/Chart/js/Chart.js"></script>  

  12.         <script>  

  13.             var randomScalingFactor = function() {  

  14.                 return Math.round(Math.random() * 100)  

  15.             };  

  16.             var lineChartData = {  

  17.                 labels: ["January""February""March""April""May""June""July"],  

  18.                 datasets: [  

  19.                     {  

  20.                         label: "My First dataset",  

  21.                         fillColor: "rgba(220,220,220,0.2)",  

  22.                         strokeColor: "rgba(220,220,220,1)",  

  23.                         pointColor: "rgba(220,220,220,1)",  

  24.                         pointStrokeColor: "#fff",  

  25.                         pointHighlightFill: "#fff",  

  26.                         pointHighlightStroke: "rgba(220,220,220,1)",  

  27.                         data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]  下载

  28.                     },  

  29.                     {  

  30.                         label: "My Second dataset",  

  31.                         fillColor: "rgba(151,187,205,0.2)",  

  32.                         strokeColor: "rgba(151,187,205,1)",  

  33.                         pointColor: "rgba(151,187,205,1)",  

  34.                         pointStrokeColor: "#fff",  

  35.                         pointHighlightFill: "#fff",  

  36.                         pointHighlightStroke: "rgba(151,187,205,1)",  

  37.                         data: [randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor(), randomScalingFactor()]  

  38.                     }  

  39.                 ]  

  40.   

  41.             }  

  42.   

  43.             window.onload = function() {  

  44.                 var ctx = document.getElementById("canvas").getContext("2d");  

  45.                 window.myLine = new Chart(ctx).Line(lineChartData, {  

  46.                     responsive: true  

  47.                 });  

  48.             }  

  49.   

  50.   

  51.         </script>  

 


Chart.js演示7种不同的统计图