javascript - 单击按钮后 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

好吧，我想我已经有了。关于我想要在这里实现的目标的一些解释:

此构造函数负责配置和构造图表动画。

 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
                        };

现在您可以将其绑定(bind)到代码中的任何操作来运行动画，如下所示:

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 动画。让我知道进展如何