您现在的位置: 首页 > JS特效 > HTML5+CSS3特效 > 正文

HTML5 Canvas雷达图(jquery插件Chart.js)

作者:admin来源:网络浏览:时间:2016-03-04 13:13:09我要评论
分享到

内容介绍

HTML5 Canvas雷达图(jquery插件Chart.js)

核心代码:

  1. <script> 
  2.                        var radarChartData = { 
  3.                            labels: ["品牌""做工""材质""款式""新旧程度"], 
  4.                            datasets: [ 
  5.                                { 
  6.                                    label: ""
  7.                                    fillColor: "rgba(0,0,0,0)"
  8.                                    strokeColor: "rgba(0,0,0,0)"
  9.                                    pointColor: "rgba(0,0,0,0)"
  10.                                    pointStrokeColor: "rgba(0,0,0,0)"
  11.                                    pointHighlightFill: "rgba(0,0,0,0)"
  12.                                    pointHighlightStroke: "rgba(0,0,0,0)"
  13.                                    data: [5,5,5,5,5] 
  14.                                }, 
  15.                                { 
  16.                                    label: ""
  17.                                    fillColor: "rgba(0,0,0,0)"
  18.                                    strokeColor: "rgba(0,0,0,0)"
  19.                                    pointColor: "rgba(0,0,0,0)"
  20.                                    pointStrokeColor: "rgba(0,0,0,0)"
  21.                                    pointHighlightFill: "rgba(0,0,0,0)"
  22.                                    pointHighlightStroke: "rgba(0,0,0,0)"
  23.                                    data: [null,null,null,null,true
  24.                                }, 
  25.                                { 
  26.                                    label: "变形玩具金刚4"
  27.                                    fillColor: "rgba(255,239,229,0.6)"
  28.                                    strokeColor: "rgba(227,211,201,0.6)"
  29.                                    pointColor: "rgba(255,95,1,1)"
  30.                                    pointStrokeColor: "#ff5f01"
  31.                                    pointHighlightFill: "#ff5f01"
  32.                                    pointHighlightStroke: "rgba(200,76,4,0.8)"
  33.                                    data: [4,5,5,2,5] 
  34.                                } 
  35.                            ] 
  36.                        }; 
  37.                      //B5教程网www.bcty365.com 
  38.                        window.onload = function(){ 
  39.                            window.myRadar = new Chart(document.getElementById("myChart").getContext("2d")).Radar(radarChartData, { 
  40.                                responsive: true 
  41.                            }); 
  42.                        } 
  43.                    </script> 

 

下载资源:777 下载积分:0 积分
相关热词搜索: