温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

Chart.js如何实现7种不同的统计图

发布时间:2021-11-24 10:58:15 来源:亿速云 阅读:183 作者:小新 栏目:开发技术

这篇文章主要为大家展示了“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="/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种不同的统计图”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI