使用CSS3关键帧超级彩虹来更改javascriptoughnutData的颜色

Question

I am using javascript doughnutData on my websites. I have successfully applied super-rainbow to text (an effect that changes text color). Is there anyway to target the color value within the the javascript and apply the CSS3 rainbow effect?

var doughnutData = [
                                {
                                    value: 70,
                                    color:"#74cfae"
                                }

They keyframe code I am using is as follows:

-webkit-animation: super-rainbow 2s infinite linear;
    -moz-animation: super-rainbow 2s infinite linear;
    -o-animation: linear-super-rainbow 2s infinite linear;
    -ms-animation: linear-super-rainbow 2s infinite linear;
}

    @-webkit-keyframes super-rainbow {
    0% {
        color: #333;
    }
    20% {
        color:#06C;
    }
    40% {
        color:#090;
    }
    60% {
        color:#FC0;
    }
    80% {
        color:#F00;
    }
    100% {
        color:#606;
    }
    }
@-moz-keyframes super-rainbow {
    0% {
        color: #333;
    }
    20% {
        color:#06C;
    }
    40% {
        color:#090;
    }
    60% {
        color:#FC0;
    }
    80% {
        color:#F00;
    }
    100% {
        color:#606;
    }
}
    @-o-keyframes super-rainbow {
    0% {
        color: #333;
    }
    20% {
        color:#06C;
    }
    40% {
        color:#090;
    }
    60% {
        color:#FC0;
    }
    80% {
        color:#F00;
    }
    100% {
        color:#606;
    }
    }
    @-ms-keyframes super-rainbow {
    0% {
        color: #333;
    }
    20% {
        color:#06C;
    }
    40% {
        color:#090;
    }
    60% {
        color:#FC0;
    }
    80% {
        color:#F00;
    }
    100% {
        color:#606;
    }
}

Answer 1

The library you want to use (chart.js), uses canvas object to draw to. What this mean, in a few words: The content is not HTML based.

What would lead to: If it's not HTML, CSS do not apply to it...

chart.js uses a Canvas, and draws charts as primitives as they are (lines, squares, circles, elipses...). They do not contain div , ul , span ... And this is a good reason: Rendering is faster and more controllable.

However, because of this, the answer for your question is no . That effect you made cannot be set in the properties, because it wont work.