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动画。让我知道它是怎么回事

单击按钮后Chart.js动画图表

1 个答案: