單擊按鈕後Chart.js動畫圖表

Question

我使用Chart.js創建雷達圖表。我想從菜單中點擊一個按鈕時開始動畫。現在它開始當您加載該網站。

下面是實際的腳本：

var radarChartData = { 
    labels : ["Html5","Responsive","LESS","SASS","JavaScript","WordPress","Git","WebGL","LAMP","CSS3","User Interface Design","SEO","Web applications"], 
    datasets : [{ 
     fillColor : "rgba(255,255,255,0.5)", 
     strokeColor : "rgba(250,250,250,1)", 
     pointColor : "rgba(255,255,255,1)", 
     pointStrokeColor : "#fff",    
     data : [100,100,80,80,80,70,50,30,100,100,80,70,70] 
    }]   
} 

var myRadar = new Chart(document.getElementById("skill-radar").getContext("2d")) 
    .Radar(radarChartData, { 
     scaleShowLabels : true, 
     scaleOverride : true, 
     scaleSteps : 10, 
     scaleStepWidth : 10, 
     scaleLineColor : "rgba(250,250,250,.5)", 
     angleLineColor : "rgba(250,250,250,.3)", 
     scaleFontFamily : "'Exo'", 
     scaleFontColor : "#fff", 
     scaleFontSize : 10, 
     scaleBackdropColor : "rgba(0,0,0,0.75)", 
     pointLabelFontFamily : "'Exo'", 
     pointLabelFontSize : 16, 
     pointLabelFontColor : "#fff", 
     animationEasing : "easeOutSine", 
     animationSteps : 100, 
     pointLabelFontSize : 10 
}); 

var chartJsConstruct = function(){ 
//..your chart.js invocation with 'new' as shown above 
new Chart(document.getElementById("skill-radar").getContext("2d")) 
    .Radar(radarChartData, { 
     scaleShowLabels : true, 
     scaleOverride : true, 
     scaleSteps : 10, 
     scaleStepWidth : 10, 
     scaleLineColor : "rgba(250,250,250,.5)", 
     angleLineColor : "rgba(250,250,250,.3)", 
     scaleFontFamily : "'Exo'", 
     scaleFontColor : "#fff", scaleFontSize : 10, 
     scaleBackdropColor : "rgba(0,0,0,0.75)", 
     pointLabelFontFamily : "'Exo'", 
     pointLabelFontSize : 16, 
     pointLabelFontColor : "#fff", 
     animationEasing : "easeOutSine", 
     animationSteps : 100, 
     pointLabelFontSize : 10 
    }); 
}; 

var skillsLink = document.getElementById('ui-id-2'); // find the target to add behavior 

// add behavior agnostic of browser 
if (skillsLink.addEventListener){// for Non-IE browsers 
    skillsLink.addEventListener('click', chartJsConstruct); 
} else if(skillsLink.attachEvent){// for IE9 and below 
    skillsLink.attachEvent('onclick', chartJsConstruct); 
} 

Answer 1

好吧，我想我有它。關於我想要實現的內容的一些解釋：

此構造函數是負責配置和構建Chart動畫的內容。

new Chart(document.getElementById("skill-radar").getContext("2d")) 
.Radar(radarChartData,{ 
     scaleShowLabels : true 
     , scaleOverride : true 
     , scaleSteps : 10 
     , scaleStepWidth : 10 
     , scaleLineColor : "rgba(250,250,250,.5)" 
     , angleLineColor : "rgba(250,250,250,.3)" 
     , scaleFontFamily : "'Exo'" 
     , scaleFontColor : "#fff", scaleFontSize : 10 
     , scaleBackdropColor : "rgba(0,0,0,0.75)" 
     , pointLabelFontFamily : "'Exo'" 
     , pointLabelFontSize : 16 
     , pointLabelFontColor : "#fff" 
     , animationEasing : "easeOutSine" 
     , animationSteps : 100 
     , pointLabelFontSize : 10}); 

每當您調用上述動畫時，都會顯示。我們需要一個可以每次調用它的函數的引用，而不必在上面輸入繁瑣的字符串。 JavaScript允許你在一個函數進行包裝，並創建一個函數表達式這樣做：

var chartJsConstruct = function(){ 
         //..your chart.js invocation with 'new' as shown above 
         }; 

現在，你可以把它綁定到任何行動，你的代碼運行這樣的動畫：

var skillsLink = document.getElementById('ui-id-2'); // find the target to add behavior 

// add behavior agnostic of browser 
if (skillsLink.addEventListener){// for Non-IE browsers 
    skillsLink.addEventListener('click', chartJsConstruct); 
}else if(skillsLink.attachEvent){// for IE9 and below 
    skillsLink.attachEvent('onclick', chartJsConstruct); 
} 

這應該每次點擊「技能」鏈接時都會重新載入chart.js動畫。讓我知道它是怎麼回事