Javascript Chart.js单击按钮后为图表设置动画

我正在使用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);
}

---

好的，我想我拿到了。关于我在这里试图实现的目标的一点解释：

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

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

现在，您可以将其绑定到代码中的任何操作，以如下方式运行动画：

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

在这里。我尝试做的是在你点击技能菜单时启动动画，而不是在网站加载时启动。谢谢图表在技能中section@AlejandroJuárez如果我打开alejuu.com并复制代码，每次单击“技能链接”时动画都会发生…你能打开你的网页并在控制台中运行代码吗？哦，你是对的，但我已经将其粘贴到我创建的加载图表的脚本中，名为radarskills.js但不起作用，我尝试粘贴在head部分，至少我将其粘贴在chart.min.js中，但也不起作用，它weird@AlejandroJuárez你可以创建这样的标签..把代码放在这里。。。并将代码放在标记之间…确保此标记仅在chart.js标记之后定义，否则您将在控制台中看到大量未定义的错误。谢谢！，我尝试了allready和图表加载，但当你点击按钮时仍然没有这样做