Chart.js 輕量級(jí)HTML5圖表繪制工具庫(kù)（知識(shí)整理）
更新時(shí)間：2018年05月22日 14:55:50 作者：馬燦發(fā)
這篇文章主要介紹了Chart.js 輕量級(jí)HTML5圖表繪制工具庫(kù)，Chart.js基于HTML5 canvas技術(shù)支持所有現(xiàn)代瀏覽器，并且針對(duì)IE7/8提供了降級(jí)替代方案，感興趣的小伙伴們可以參考一下
Chart.js：用不同的方式讓你的數(shù)據(jù)變得可視化。每種類型的圖表都有動(dòng)畫(huà)效果，并且看上去非常棒，即便是在retina屏幕上?；贖TML5 canvas技術(shù)，Chart.js不依賴任何外部工具庫(kù)，輕量級(jí)（壓縮之后僅有4.5k）。值得推薦學(xué)習(xí)！
GitHub源碼： https://github.com/nnnick/Chart.js
Chart.js文檔：http://www.bootcss.com/p/chart.js/
步驟：
html部分：
<canvas id="myChart" width="400" height="400"></canvas>
javascript部分：
- 引入Chart.js文件；
- 創(chuàng)建圖表：實(shí)例化Chart對(duì)象（獲取DOM節(jié)點(diǎn)取得2d context環(huán)境后實(shí)例化）；
- 實(shí)例化Chart對(duì)象后就繼續(xù)創(chuàng)建具體類型的圖表了；
曲線圖（Line chart）：
html:
<canvas id="myChart" width="600" height="400"></canvas>
javascript:(引入及兩種使用方式)
<script src="js/Chart.min.js"></script>
<script type="text/javascript">
//方式一：
var ctx = document.getElementById("myChart").getContext("2d");;
var MyNewChart = new Chart(ctx).Line(data); //這種方式是只加載數(shù)據(jù)集，（缺省options）不修改默認(rèn)參數(shù)（簡(jiǎn)稱法一）
//數(shù)據(jù)結(jié)構(gòu)（數(shù)據(jù)參數(shù)設(shè)置）
var data = {
//折線圖需要為每個(gè)數(shù)據(jù)點(diǎn)設(shè)置一標(biāo)簽。這是顯示在X軸上。
labels: ["January", "February", "March", "April", "May", "June", "July"],
//數(shù)據(jù)集（y軸數(shù)據(jù)范圍隨數(shù)據(jù)集合中的data中的最大或最小數(shù)據(jù)而動(dòng)態(tài)改變的）
datasets: [{
fillColor: "rgba(220,220,220,0.5)", //背景填充色
strokeColor: "rgba(220,220,220,1)", //路徑顏色
pointColor: "rgba(220,220,220,1)", //數(shù)據(jù)點(diǎn)顏色
pointStrokeColor: "#fff", //數(shù)據(jù)點(diǎn)邊框顏色
data: [10, 59, 90, 81, 56, 55, 40] //對(duì)象數(shù)據(jù)
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 200]
}]
};
</script>
數(shù)據(jù)結(jié)構(gòu)：
//數(shù)據(jù)結(jié)構(gòu)（數(shù)據(jù)參數(shù)設(shè)置）
var data = {
//折線圖需要為每個(gè)數(shù)據(jù)點(diǎn)設(shè)置一標(biāo)簽。這是顯示在X軸上。
labels: ["January", "February", "March", "April", "May", "June", "July"],
//數(shù)據(jù)集（y軸數(shù)據(jù)范圍隨數(shù)據(jù)集合中的data中的最大或最小數(shù)據(jù)而動(dòng)態(tài)改變的）
datasets: [{
fillColor: "rgba(220,220,220,0.5)", //背景填充色
strokeColor: "rgba(220,220,220,1)", //路徑顏色
pointColor: "rgba(220,220,220,1)", //數(shù)據(jù)點(diǎn)顏色
pointStrokeColor: "#fff", //數(shù)據(jù)點(diǎn)邊框顏色
data: [10, 59, 90, 81, 56, 55, 40] //對(duì)象數(shù)據(jù)
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 200]
}]
};
圖標(biāo)參數(shù)：
Line.defaults = {
//網(wǎng)格線是否在數(shù)據(jù)線的上面
scaleOverlay : false,
//是否用硬編碼重寫(xiě)y軸網(wǎng)格線
scaleOverride : false,
//** Required if scaleOverride is true **
//y軸刻度的個(gè)數(shù)
scaleSteps : null,
//y軸每個(gè)刻度的寬度
scaleStepWidth : 20,
// Y 軸的起始值
scaleStartValue : null,
// Y/X軸的顏色
scaleLineColor: "rgba(0,0,0,.1)",
// X,Y軸的寬度
scaleLineWidth: 1,
// 刻度是否顯示標(biāo)簽, 即Y軸上是否顯示文字
scaleShowLabels: true,
// Y軸上的刻度,即文字
scaleLabel: "<%=value%>",
// 字體
scaleFontFamily: "'Arial'",
// 文字大小
scaleFontSize: 16,
// 文字樣式
scaleFontStyle: "normal",
// 文字顏色
scaleFontColor: "#666",
// 是否顯示網(wǎng)格
scaleShowGridLines: true,
// 網(wǎng)格顏色
scaleGridLineColor: "rgba(0,0,0,.05)",
// 網(wǎng)格寬度
scaleGridLineWidth:2,
// 是否使用貝塞爾曲線? 即:線條是否彎曲
bezierCurve: true,
// 是否顯示點(diǎn)數(shù)
pointDot: true,
// 圓點(diǎn)的大小
pointDotRadius:5,
// 圓點(diǎn)的筆觸寬度, 即:圓點(diǎn)外層白色大小
pointDotStrokeWidth: 2,
// 數(shù)據(jù)集行程(連線路徑)
datasetStroke: true,
// 線條的寬度, 即:數(shù)據(jù)集
datasetStrokeWidth: 2,
// 是否填充數(shù)據(jù)集
datasetFill: true,
// 是否執(zhí)行動(dòng)畫(huà)
animation: true,
// 動(dòng)畫(huà)的時(shí)間
animationSteps: 60,
// 動(dòng)畫(huà)的特效
animationEasing: "easeOutQuart",
// 動(dòng)畫(huà)完成時(shí)的執(zhí)行函數(shù)
/*onAnimationComplete: null*/
}
（表示剛接觸Chart.js，看到這圖表參數(shù)整個(gè)人都懵了，還全程英文注釋，呵呵~）
理解完圖表參數(shù)后，就可以自定義圖表參數(shù)啦，下面來(lái)看看具體事例用法：
html部分和js文件引入部分省略：（之后的圖表類型也同樣省略!）
<script type="text/javascript">
//同樣數(shù)據(jù)參數(shù)設(shè)置
var data = {
//折線圖需要為每個(gè)數(shù)據(jù)點(diǎn)設(shè)置一標(biāo)簽。這是顯示在X軸上。
labels: ["January", "February", "March", "April", "May", "June", "July"],
//這邊的thisId分別對(duì)應(yīng)labels的id
thisIds : [12,22,50,44,99,3,67],
//數(shù)據(jù)集（y軸數(shù)據(jù)范圍隨數(shù)據(jù)集合中的data中的最大或最小數(shù)據(jù)而動(dòng)態(tài)改變的）
datasets: [{
fillColor: "rgba(220,220,220,0.5)", //背景填充色
strokeColor: "rgba(220,220,220,1)", //路徑顏色
pointColor: "rgba(220,220,220,1)", //數(shù)據(jù)點(diǎn)顏色
pointStrokeColor: "#fff", //數(shù)據(jù)點(diǎn)邊框顏色
data: [10, 59, 90, 81, 56, 55, 40] //對(duì)象數(shù)據(jù)
}, {
fillColor: "rgba(151,187,205,0.5)",
strokeColor: "rgba(151,187,205,1)",
pointColor: "rgba(151,187,205,1)",
pointStrokeColor: "#fff",
data: [28, 48, 40, 19, 96, 27, 200]
}]
};
window.onload = function() {
var ctx = document.getElementById("myChart").getContext("2d");;
//方式二：傳入對(duì)象字面量去修改默認(rèn)圖標(biāo)參數(shù)，自定義圖表
var MyNewChart = new Chart(ctx).Line(data, {
// 網(wǎng)格顏色
scaleGridLineColor: "rgba(255,0,0,1)",
// Y/X軸的顏色
scaleLineColor: "rgba(0,0,0,.1)",
// 文字大小
scaleFontSize: 16,
// 文字顏色
scaleFontColor: "#666",
// 網(wǎng)格顏色
scaleGridLineColor: "rgba(0,0,0,.05)",
// 是否使用貝塞爾曲線? 即:線條是否彎曲
// 是否執(zhí)行動(dòng)畫(huà)
animation: true,
// 動(dòng)畫(huà)的時(shí)間
animationSteps: 60,
// 動(dòng)畫(huà)完成時(shí)的執(zhí)行函數(shù)
onAnimationComplete: function(){
console.log("給x軸的lable對(duì)應(yīng)的id：");
console.log(data.thisIds);
}
});
}
</script>
效果圖：
柱狀圖：
new Chart(ctx).Bar(data,options);//簡(jiǎn)記，options可缺省
數(shù)據(jù)結(jié)構(gòu)：
var data = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
fillColor : "rgba(220,220,220,0.5)",
strokeColor : "rgba(220,220,220,1)",
data : [65,59,90,81,56,55,40]
},
{
fillColor : "rgba(151,187,205,0.5)",
strokeColor : "rgba(151,187,205,1)",
data : [28,48,40,19,96,27,100]
}
]
}
圖標(biāo)參數(shù)：
Bar.defaults = {
//網(wǎng)格線是否在數(shù)據(jù)線的上面
scaleOverlay : false,
//是否用硬編碼重寫(xiě)y軸網(wǎng)格線
scaleOverride : false,
//** Required if scaleOverride is true **
//y軸刻度的個(gè)數(shù)
scaleSteps : null,
//y軸每個(gè)刻度的寬度
scaleStepWidth : null,
//Y軸起始值
scaleStartValue: null,
// Y/X軸的顏色
scaleLineColor: "rgba(0,0,0,.1)",
// X,Y軸的寬度
scaleLineWidth: 1,
// 刻度是否顯示標(biāo)簽, 即Y軸上是否顯示文字
scaleShowLabels: false,
// Y軸上的刻度,即文字
scaleLabel: "<%=value%>",
// 字體
scaleFontFamily: "'Arial'",
// 文字大小
scaleFontSize: 12,
// 文字樣式
scaleFontStyle: "normal",
// 文字顏色
scaleFontColor: "#666",
// 是否顯示網(wǎng)格
scaleShowGridLines: true,
// 網(wǎng)格顏色
scaleGridLineColor: "rgba(0,0,0,.05)",
// 網(wǎng)格寬度
scaleGridLineWidth: 1,
//Bar Chart圖表特定參數(shù)：
//是否繪制柱狀條的邊框
barShowStroke : true,
//柱狀條邊框的寬度
barStrokeWidth : 2,
//柱狀條組之間的間距(過(guò)大或過(guò)小會(huì)出現(xiàn)重疊偏移錯(cuò)位的效果，請(qǐng)控制合理數(shù)值)
barValueSpacing :5,
//每組柱狀條組中柱狀條之間的間距
barDatasetSpacing :5,
// 是否顯示提示
showTooltips: true,
// 是否執(zhí)行動(dòng)畫(huà)
animation: true,
// 動(dòng)畫(huà)的時(shí)間
animationSteps: 60,
// 動(dòng)畫(huà)的特效
animationEasing: "easeOutQuart",
// 動(dòng)畫(huà)完成時(shí)的執(zhí)行函數(shù)
onAnimationComplete: null
}
部分javascript實(shí)例
var barChart = new Chart(ctx).Bar(data, {
scaleLabel: "$"+"<%=value%>",
//是否繪制柱狀條的邊框
barShowStroke: true,
//柱狀條邊框的寬度
barStrokeWidth: 2,
//柱狀條組之間的間距(過(guò)大或過(guò)小會(huì)出現(xiàn)重疊偏移錯(cuò)位的效果，請(qǐng)控制合理數(shù)值)
barValueSpacing: 5,
//每組柱狀條組中柱狀條之間的間距
barDatasetSpacing: 5,
});
效果圖：
餅圖：
javascript:
new Chart(ctx).Pie(data,options);
數(shù)據(jù)結(jié)構(gòu)：
var data=[
{
value:40,
color:"#21F0EA",//背景色
highlight:"#79E8E5",//高亮背景顏色
label:'javascript'//文字標(biāo)簽
},{
value:60,
color:"#E0E4CC",
highlight:"#EAEDD8",
label:'jquery'
},{
value:100,
color:"#69D2E7",
highlight:"#83E5F7",
label:'html'
}
];
圖標(biāo)參數(shù)：
Pie.defaults = {
//是否顯示每段行程（即扇形區(qū)，不為true則無(wú)法看到后面設(shè)置的邊框顏色）
segmentShowStroke : true,
//設(shè)置每段行程的邊框顏色
segmentStrokeColor : "red",
//心啊是每段扇區(qū)邊框的寬度
segmentStrokeWidth :2,
//Boolean - 是否執(zhí)行動(dòng)畫(huà)
animation : true,
//Number - 動(dòng)畫(huà)時(shí)間
animationSteps : 100,
//String - 動(dòng)畫(huà)的效果
animationEasing : "easeOutBounce",
//Boolean -是否旋轉(zhuǎn)動(dòng)畫(huà)
animateRotate : true,
//Boolean - 是否動(dòng)畫(huà)縮放餅圖中心（效果不錯(cuò)）
animateScale : true,
//Function - 火動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)
onAnimationComplete : null
}
部分javascript實(shí)例：
var ctx=document.getElementById("pieChart").getContext("2d");
window.pieChart=new Chart(ctx).Pie(data,{
//是否顯示每段行程（即扇形區(qū)，不為true則無(wú)法看到后面設(shè)置的邊框顏色）
segmentShowStroke : true,
//設(shè)置每段行程的邊框顏色
segmentStrokeColor : "red",
//每段扇區(qū)邊框的寬度
segmentStrokeWidth :2,
//Boolean - 是否執(zhí)行動(dòng)畫(huà)
animation : true,
//Number - 動(dòng)畫(huà)時(shí)間
animationSteps : 100,
//String - 動(dòng)畫(huà)的效果
animationEasing : "easeOutBounce",
//Boolean -是否旋轉(zhuǎn)動(dòng)畫(huà)
animateRotate : true,
//Boolean - 是否動(dòng)畫(huà)縮放餅圖中心（效果不錯(cuò)）
animateScale : true,
//Function - 動(dòng)畫(huà)完成時(shí)執(zhí)行的函數(shù)
//onAnimationComplete : null
});
效果圖：
環(huán)形圖：
javascript:
new Chart(ctx).Doughnut(data,options);
數(shù)據(jù)結(jié)構(gòu)：
//數(shù)據(jù)結(jié)構(gòu)（與餅圖相似）
var data = [{
value: 30,
color: "#F7464A",
highlight: "#FA7C7C",
label: "angularJS"
}, {
value: 50,
color: "#E2EAE9",
highlight: "#F2F5F5",
label: "juqery"
}, {
value: 100,
color: "#D4CCC5",
hightlight: "#DBD6D1",
label: "javascript"
}, {
value: 40,
color: "#949FB1",
highlight: "#AFBCCE",
label: "nodeJS"
}, {
value: 120,
color: "#4D5360",
highlight: "#767C86",
label: "html"
}];
圖標(biāo)參數(shù)：
Doughnut.defaults={
//是否顯示每段行程（即環(huán)形區(qū)，不為true則無(wú)法看到后面設(shè)置的邊框顏色）
segmentShowStroke: true,
//設(shè)置每段行程的邊框顏色
segmentStrokeColor: "#fff",
//設(shè)置每段環(huán)形的邊框?qū)挾?
segmentStrokeWidth: 2,
//圖標(biāo)中心剪切圓的比例（0為餅圖，接近100則環(huán)形寬度越小）
percentageInnerCutout: 50,
//是否執(zhí)行動(dòng)畫(huà)
animation: true,
//執(zhí)行動(dòng)畫(huà)時(shí)間
animationSteps: 100,
//動(dòng)畫(huà)特效
animationEasing: "easeOutBounce",
//是否旋轉(zhuǎn)動(dòng)畫(huà)
animateRotate: true,
//是否縮放圖表中心
animateScale: true,
//動(dòng)畫(huà)完成時(shí)的回調(diào)函數(shù)
// onAnimationComplete: null
}
效果圖：
Chart.js總共有六大圖表：除此之外，還有剩下兩種：雷達(dá)圖或蛛網(wǎng)圖、極地區(qū)域圖，讀者請(qǐng)自行參考：Chart.js中文文檔
那么，問(wèn)題來(lái)了??？圖表的圖例怎么辦？這貨在應(yīng)用中也是很常用的！經(jīng)過(guò)多次的查閱，找到以下方法實(shí)現(xiàn)圖例部分，膜拜一下各路大神先！除此之外，還可以動(dòng)畫(huà)完成后將各組數(shù)據(jù)自動(dòng)顯示，而不用手動(dòng)查看各組數(shù)據(jù)！
直接上各部分代碼：
html部分：
<h2>柱狀圖</h2> <canvas id="barChart" width="400" height="300"></canvas> <!--這里添加了用來(lái)放置圖例的div標(biāo)簽--> <div id="legend"></div>
css部分：（不設(shè)置基礎(chǔ)樣式的話，可能看不出預(yù)期的效果）
<style>
ul,li{
list-style-type:none;;
}
ul>li{
margin:5px auto;
font-family: "微軟雅黑";
}
span{
display: inline-block;
width:20px;height:20px;line-height: 20px;
vertical-align:middle;
margin-right:5px;
}
</style>
javascript部分：
window.onload = function() {
var ctx = document.getElementById("barChart").getContext("2d");
var barChart = new Chart(ctx).Bar(data, {
showTooltips: false, // 是否顯示提示,這里需要設(shè)置為false
//模板
legendTemplate:
'<ul class=\"<%=name.toLowerCase()%>-legend\">'+
'<% for (var i=0; i<datasets.length; i++){%>'+
'<li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span>'+
'<%if(datasets[i].label){%><%=datasets[i].label%><%}%></li>'+
'<%}%>'+
'</ul>',
onAnimationComplete: function() {//動(dòng)畫(huà)完成后顯示對(duì)應(yīng)的數(shù)據(jù)
var ctx = this.chart.ctx;
ctx.font = this.scale.font;
ctx.fillStyle = this.scale.textColor;
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.datasets.forEach(function(dataset) {
dataset.bars.forEach(function(bar) {
ctx.fillText(bar.value, bar.x, bar.y);
});
});
}
});
var legend = document.getElementById('legend');
// 圖例
legend.innerHTML = barChart.generateLegend();
}
//數(shù)據(jù)結(jié)構(gòu)：
var data = {
labels: ["一月", "二月", "三月", "四月", "五月", "六月", "七月"],
datasets: [{
fillColor: "rgba(220,220,220,0.5)",
strokeColor: "rgba(220,220,220,1)",
data: [65, 59, 90, 81, 56, 55, 40],
label: "本月銷售額"http://圖例標(biāo)簽
},{
fillColor: "#69D2E7",
strokeColor: "#B2E5ED",
data: [54, 99, 72, 61, 86, 65, 84],
label: "本季度銷售額"
}]
};
效果圖：
總結(jié)：
Chart.js中的六種圖表，js部分大致分為數(shù)據(jù)結(jié)構(gòu)、圖表參數(shù)（通用參數(shù)以及各自特有參數(shù)）和實(shí)例化引用三大部分，而數(shù)據(jù)的動(dòng)態(tài)加載可在數(shù)據(jù)結(jié)構(gòu)中的data屬性傳入json等數(shù)據(jù)文件或變量。在多處實(shí)戰(zhàn)中可能需要用到數(shù)據(jù)圖表，呈現(xiàn)給用戶更好的用戶體驗(yàn)，此次學(xué)習(xí)簡(jiǎn)記以便日后復(fù)習(xí)、使用！希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- 使用Chart.js圖表庫(kù)制作漂亮的響應(yīng)式表單
- 詳解Chart.js輕量級(jí)圖表庫(kù)的使用經(jīng)驗(yàn)
- 在 Angular 中使用Chart.js 和 ng2-charts的示例代碼
- 使用Vue.js 和Chart.js制作絢麗多彩的圖表
- ichart.js繪制虛線、平均分虛線效果的實(shí)現(xiàn)代碼
- Chart.js在Laravel項(xiàng)目中的應(yīng)用示例
- vue集成chart.js的實(shí)現(xiàn)方法
- 利用ECharts.js畫(huà)K線圖的方法示例
- JavaScript Chart 插件整理
- 詳解vue文件中使用echarts.js的兩種方式
- vue.js+Echarts開(kāi)發(fā)圖表放大縮小功能實(shí)例
- Chart.js功能與使用方法小結(jié)
相關(guān)文章
JavaScript圖片上傳并預(yù)覽的完整實(shí)例
上傳是個(gè)老生常談的話題了,多數(shù)情況下各位想必用的是uplodify,webUploader之類的插件,這篇文章主要給大家介紹了關(guān)于JavaScript圖片上傳并預(yù)覽的相關(guān)資料,需要的朋友可以參考下2022-01-01
獲取當(dāng)前月（季度/年）的最后一天（set相關(guān)操作及應(yīng)用）
本文主要介紹了setset相關(guān)操作及應(yīng)用，通過(guò)獲取當(dāng)前月（季度/年）的最后一天具體事例來(lái)解析說(shuō)明，具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2016-12-12
JavaScript實(shí)現(xiàn)網(wǎng)頁(yè)加載進(jìn)度條代碼超簡(jiǎn)單
網(wǎng)頁(yè)進(jìn)度條能夠更好的反應(yīng)當(dāng)前網(wǎng)頁(yè)的加載進(jìn)度情況，loading進(jìn)度條可用動(dòng)畫(huà)的形式從開(kāi)始0%到100%完成網(wǎng)頁(yè)加載這一過(guò)程。代碼簡(jiǎn)單易懂，效果非常好，需要的一起學(xué)習(xí)學(xué)習(xí)吧2015-09-09
鼠標(biāo)捕獲(setCapture)作用是將鼠標(biāo)事件捕獲到當(dāng)前文檔的指定的對(duì)象。這個(gè)對(duì)象會(huì)為當(dāng)前應(yīng)用程序或整個(gè)系統(tǒng)接收所有鼠標(biāo)事件。2010-03-03
使用原生js編寫(xiě)一個(gè)簡(jiǎn)單的框選功能方法
這篇文章主要介紹了使用原生js編寫(xiě)一個(gè)簡(jiǎn)單的框選功能方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序選擇圖片控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-01-01
JavaScript對(duì)數(shù)組進(jìn)行隨機(jī)重排的方法
這篇文章主要介紹了JavaScript對(duì)數(shù)組進(jìn)行隨機(jī)重排的方法,實(shí)例分析了javascript實(shí)現(xiàn)數(shù)組隨機(jī)重新排序的兩種實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了如何用JS求Number類型數(shù)組中最大元素2018-04-04
本文主要介紹了js事件冒泡與事件捕獲的相關(guān)知識(shí)。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02
相對(duì)于很多其他的面向?qū)ο笳Z(yǔ)言來(lái)說(shuō)，this代表的就是當(dāng)前對(duì)象。本篇文章通過(guò)實(shí)例給大家介紹js中的this關(guān)鍵字，感興趣的朋友一起看看吧2016-10-10