超酷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种不同的统计图