我是Polymer的新手，所以我正在学习。现在，我正在使用最新版本的Polymer 3.0。我正在处理的这个网站上已经有一个工作版首页。在尝试使所有内容在聚合物上都能正常工作时，我一直无法使JavaScript正常工作。
在原始站点上，我正在使用此代码
index.html
<div class="year-overview">
<div class="ano-lectivo">
<svg class="progress-ring" width="50%" height="50%" opacity="0" viewBox="0 0 42 42">
<circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
<text x="50%" y="53%" class="circle-text" text-anchor="middle">
<tspan class="currentDay">35</tspan>
<tspan class="daysLeft">/ 300</tspan>
<tspan x="50%" y="60%">Días Lectivos</tspan>
</text>
</svg>
</div>
这是javascript文件：
function circleCircus(ringClass, circleClass, ringProgress) {
var circle = document.querySelector(circleClass);
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
var circleSVG = document.querySelector(ringClass); //For changing the opacity and not showing the circle before it loads
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
function setProgress(percent) {
const offset = circumference - percent / 100 * circumference;
circle.style.strokeDashoffset = offset;
}
setTimeout(function() {circleSVG.setAttribute("opacity", "100%");}, 1000); //Changing the circle opacity
setTimeout(function() { setProgress(ringProgress); }, 2000); //Changin the value in order to animate
}
//----------------------Progress Bar 1------------------------------------
circleCircus('.progress-ring', '.progress-ring__circle', 50);
现在我正在研究Polymer，我正在为甜甜圈图创建一个自定义元素，但是我不知道如何使用或放置使strokeDasharray和strokeDashoffset正常工作的函数：
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class DonutChart extends PolymerElement {
static get template() {
return html`
<style>
.progress-ring__circle {
stroke-width: 3;
stroke: #000;
position: relative;
transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out;
-webkit-transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out; /* For Safari 3.1 to 6.0 */
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.currentDay {
font-size: 40%;
overflow: visible;
-webkit-transition: font-size 500ms ease-out; /* For Safari 3.1 to 6.0 */
transition: font-size 500ms ease-out;
}
.daysLeft {
font-size: 40%;
-webkit-transition: font-size 500ms, color 500ms; /* For Safari 3.1 to 6.0 */
transition: font-size 500ms, color 500ms;
}
.description {
font-size: 20%;
}
.circle-text {
fill: #000;
}
.progress-ring {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
svg:hover .currentDay {
font-size: 60%;
}
svg:hover .daysLeft {
font-size: 10%;
}
svg:hover .progress-ring__circle {
stroke-width: 1;
stroke: #5a64ed;
}
</style>
<svg class="progress-ring" width="100%" height="100%" viewBox="0 0 42 42">
<circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
<text x="50%" y="53%" class="circle-text" text-anchor="middle">
<tspan class="numbers" x="54%" y="50%"><tspan class="currentDay">35</tspan><tspan class="daysLeft">/300</tspan></tspan>
<tspan x="50%" y="60%" class="description">Días Lectivos</tspan>
</text>
</svg>
`;
}
constructor() {
super();
}
var circle = this.shadowRoot.querySelector('.progress-ring__circle');
var radius = circle.r.baseVal.value;
var circumference = radiius * 2 * Math.PI;
var circleSVG = this.shadowRoot.querySelector('.progress-ring');
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
function setProgress(percent) {
const offset = circumference - percent / 100 * circumference;
circle.style.strokeDashoffset = offset;
}
setProgress(79);
}
customElements.define('donut-chart', DonutChart);
这是我的原始代码，也是我想在自定义元素中完成的工作：https://codepen.io/maganalexis/pen/ePOxYX
感谢您的帮助。
答案 0 :(得分：0)
在阅读了大量文档后，我找到了解决方案，我不得不调用ready方法并将代码放在其中：
import { PolymerElement, html } from '@polymer/polymer/polymer-element.js';
class DonutChart extends PolymerElement {
static get template() {
return html`
<style>
.progress-ring__circle {
stroke-width: 3;
stroke: #000;
position: relative;
transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out;
-webkit-transition: stroke-dashoffset 0.35s, stroke-width 500ms ease-out, stroke 500ms ease-out; /* For Safari 3.1 to 6.0 */
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.currentDay {
font-size: 40%;
overflow: visible;
-webkit-transition: font-size 500ms ease-out; /* For Safari 3.1 to 6.0 */
transition: font-size 500ms ease-out;
}
.daysLeft {
font-size: 40%;
-webkit-transition: font-size 500ms, color 500ms; /* For Safari 3.1 to 6.0 */
transition: font-size 500ms, color 500ms;
}
.description {
font-size: 20%;
}
.circle-text {
fill: #000;
}
.progress-ring {
display: block;
position: relative;
margin-left: auto;
margin-right: auto;
}
svg:hover .currentDay {
font-size: 60%;
}
svg:hover .daysLeft {
font-size: 10%;
}
svg:hover .progress-ring__circle {
stroke-width: 1;
stroke: #5a64ed;
}
</style>
<svg class="progress-ring" on-load="circleCircus" width="100%" height="100%" viewBox="0 0 42 42">
<circle class="progress-ring__circle" stroke="white" fill="transparent" r="15.91549430918954" cx="21" cy="21"></circle>
<text x="50%" y="53%" class="circle-text" text-anchor="middle">
<tspan class="numbers" x="54%" y="50%"><tspan class="currentDay">[[progressNum]]</tspan><tspan class="daysLeft">[[totalNum]]</tspan></tspan>
<tspan x="50%" y="60%" class="description">[[lowDescription]]</tspan>
</text>
</svg>
`;
}
static get properties() {
return {
progressNum: {
type: Number
},
totalNum: {
type: String
},
lowDescription: {
type: String
}
};
}
constructor() {
super();
}
ready(){
super.ready();
var circle = this.shadowRoot.querySelector('.progress-ring__circle');
var radius = circle.r.baseVal.value;
var circumference = radius * 2 * Math.PI;
var circleSVG = this.shadowRoot.querySelector('.progress-ring'); //For changing the opacity and not showing the circle before it loads
var proNum = `${this.progressNum}`;
circle.style.strokeDasharray = `${circumference} ${circumference}`;
circle.style.strokeDashoffset = `${circumference}`;
function setProgress(percent) {
const offset = circumference - percent / 100 * circumference;
circle.style.strokeDashoffset = offset;
}
setTimeout(function() {circleSVG.setAttribute("opacity", "100%");}, 1000); //Changing the circle opacity
setTimeout(function() { setProgress(proNum); }, 2000); //Changin the value in order to animate
}
}
customElements.define('donut-chart', DonutChart);