admin管理员组文章数量:1278919
I am trying to generate some Pie charts with Angular Charts, but when I build the app I keep getting the errors:
Error: attribute height: Expected length, "NaN"
Error: attribute transform: Trailing garbage, "translate(60,NaN)"
I have tried everything but it didn't work Here is my js code:
this.authService.getSurveyData().then(slist => {
// STANDARD:
this.defaultSurveys = [
{
title: "Consent Form",
accepted: slist.data.consent.accepted,
declined: slist.data.consent.declined,
chartData: {
series: ["Consent Form"],
data: [
{
x: "Accepted",
y: [slist.data.consent.accepted]
},
{
x: "Declined",
y: [slist.data.consent.declined]
}
]
},
g_chartData: {
series: ["Consent Form"],
data: [
{
x: "Accepted",
y: [slist.data.consent.accepted]
},
{
x: "Declined",
y: [slist.data.consent.declined]
}
]
}
},
{
title: "Demographics",
accepted: slist.data.demographics.accepted,
declined: slist.data.demographics.declined,
chartData: {
series: ["Demographics"],
data: [
{
x: "Accepted",
y: [slist.data.demographics.accepted]
},
{
x: "Declined",
y: [slist.data.demographics.declined]
}
]
},
g_chartData: {
series: ["Consent Form"],
data: [
{
x: "Accepted",
y: [slist.data.consent.accepted]
},
{
x: "Declined",
y: [slist.data.consent.declined]
}
]
}
}];
}, error => {
this.errorMessage = error.message;
});
this.config = {
"labels": false,
"colors": ["#00bab3", "#3e5f6d"],
"legend": {
"display": false,
"position": "right"
},
"innerRadius": 0,
"lineLegend": "lineEnd",
};
And my html code:
<!--Default Surveys-->
<div class="data-stone">
<div ng-repeat="survey in vm.defaultSurveys">
<div class="chart2">
<div class="chart-wrapper">
<div class="chart-header">
<h4>{{survey.title}}</h4>
</div>
<div class="chart-table">
<!--NUMBER OF USERS-->
<div class="chart-row">
<div class="chart-data-header chart-cell half-stand">
<label>NUMBER OF USERS</label>
</div>
<div class="chart-data-header chart-cell blankspace"></div>
<div class="chart-data-header chart-cell half-game">
<label>NUMBER OF USERS</label>
</div>
</div>
<!--ACCEPTED-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="pill sea">{{survey.accepted}}</div>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line definition">
<label class="data-sea">ACCEPTED</label>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line">
<div class="pill sea">{{survey.accepted}}</div>
</div>
</div>
<!--blank space-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="blank-divisor"></div>
</div>
</div>
<!---->
<!--DECLINED-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="pill forest">{{survey.declined}}</div>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line definition">
<label class="data-forest">DECLINED</label>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line">
<div class="pill forest">{{survey.declined}}</div>
</div>
</div>
<!--blank space-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="blank-divisor"></div>
</div>
</div>
<!---->
<!--TOTAL-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="pill water">{{survey.accepted + survey.declined}}</div>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line definition">
<label class="data-night">TOTAL</label>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line">
<div class="pill water">{{survey.accepted + survey.declined}}</div>
</div>
</div>
<!--CAKE CHARTS-->
<div class="chart-row space-recurrent">
<div class="chart-cell data-line cake-enclose">
<div class="cake">
<div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake" height="120" width="120"></div>
</div>
</div>
<div class="chart-cell data-line porct">
<div class="cake-data">
<div class="cake-subrow">
<label class="data-sea">{{survey.accepted*100/(survey.accepted + survey.declined) | number:0}}%</label>
<div class="mini-pill sea"></div>
<label class="data-sea">{{survey.accepted*100/(survey.accepted + survey.declined) | number:0}}%</label>
</div>
<div class="cake-subrow">
<label class="data-forest">{{survey.declined*100/(survey.accepted + survey.declined) | number:0}}%</label>
<div class="mini-pill forest"></div>
<label class="data-sea">{{survey.declined*100/(survey.accepted + survey.declined) | number:0}}%</label>
</div>
</div>
</div>
<div class="chart-cell data-line cake-enclose">
<div class="cake">
<div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake" style="width: 120px; height: 120px"></div>
</div>
</div>
</div>
</div>
</div>
<div class="background"></div>
</div>
<div class="chart-divisor"></div>
</div>
</div>
When I build my app it generates a "svg" element (as expected) but shows no height whatsoever..
Maybe is there a way I can set up values for width / height in order the svg elements is properly generated?
See generated SVG (with wrong height value)
I am trying to generate some Pie charts with Angular Charts, but when I build the app I keep getting the errors:
Error: attribute height: Expected length, "NaN"
Error: attribute transform: Trailing garbage, "translate(60,NaN)"
I have tried everything but it didn't work Here is my js code:
this.authService.getSurveyData().then(slist => {
// STANDARD:
this.defaultSurveys = [
{
title: "Consent Form",
accepted: slist.data.consent.accepted,
declined: slist.data.consent.declined,
chartData: {
series: ["Consent Form"],
data: [
{
x: "Accepted",
y: [slist.data.consent.accepted]
},
{
x: "Declined",
y: [slist.data.consent.declined]
}
]
},
g_chartData: {
series: ["Consent Form"],
data: [
{
x: "Accepted",
y: [slist.data.consent.accepted]
},
{
x: "Declined",
y: [slist.data.consent.declined]
}
]
}
},
{
title: "Demographics",
accepted: slist.data.demographics.accepted,
declined: slist.data.demographics.declined,
chartData: {
series: ["Demographics"],
data: [
{
x: "Accepted",
y: [slist.data.demographics.accepted]
},
{
x: "Declined",
y: [slist.data.demographics.declined]
}
]
},
g_chartData: {
series: ["Consent Form"],
data: [
{
x: "Accepted",
y: [slist.data.consent.accepted]
},
{
x: "Declined",
y: [slist.data.consent.declined]
}
]
}
}];
}, error => {
this.errorMessage = error.message;
});
this.config = {
"labels": false,
"colors": ["#00bab3", "#3e5f6d"],
"legend": {
"display": false,
"position": "right"
},
"innerRadius": 0,
"lineLegend": "lineEnd",
};
And my html code:
<!--Default Surveys-->
<div class="data-stone">
<div ng-repeat="survey in vm.defaultSurveys">
<div class="chart2">
<div class="chart-wrapper">
<div class="chart-header">
<h4>{{survey.title}}</h4>
</div>
<div class="chart-table">
<!--NUMBER OF USERS-->
<div class="chart-row">
<div class="chart-data-header chart-cell half-stand">
<label>NUMBER OF USERS</label>
</div>
<div class="chart-data-header chart-cell blankspace"></div>
<div class="chart-data-header chart-cell half-game">
<label>NUMBER OF USERS</label>
</div>
</div>
<!--ACCEPTED-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="pill sea">{{survey.accepted}}</div>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line definition">
<label class="data-sea">ACCEPTED</label>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line">
<div class="pill sea">{{survey.accepted}}</div>
</div>
</div>
<!--blank space-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="blank-divisor"></div>
</div>
</div>
<!---->
<!--DECLINED-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="pill forest">{{survey.declined}}</div>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line definition">
<label class="data-forest">DECLINED</label>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line">
<div class="pill forest">{{survey.declined}}</div>
</div>
</div>
<!--blank space-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="blank-divisor"></div>
</div>
</div>
<!---->
<!--TOTAL-->
<div class="chart-row">
<div class="chart-cell data-line">
<div class="pill water">{{survey.accepted + survey.declined}}</div>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line definition">
<label class="data-night">TOTAL</label>
</div>
<div class="chart-cell data-line short-line-cell">
<div class="short-line"></div>
</div>
<div class="chart-cell data-line">
<div class="pill water">{{survey.accepted + survey.declined}}</div>
</div>
</div>
<!--CAKE CHARTS-->
<div class="chart-row space-recurrent">
<div class="chart-cell data-line cake-enclose">
<div class="cake">
<div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake" height="120" width="120"></div>
</div>
</div>
<div class="chart-cell data-line porct">
<div class="cake-data">
<div class="cake-subrow">
<label class="data-sea">{{survey.accepted*100/(survey.accepted + survey.declined) | number:0}}%</label>
<div class="mini-pill sea"></div>
<label class="data-sea">{{survey.accepted*100/(survey.accepted + survey.declined) | number:0}}%</label>
</div>
<div class="cake-subrow">
<label class="data-forest">{{survey.declined*100/(survey.accepted + survey.declined) | number:0}}%</label>
<div class="mini-pill forest"></div>
<label class="data-sea">{{survey.declined*100/(survey.accepted + survey.declined) | number:0}}%</label>
</div>
</div>
</div>
<div class="chart-cell data-line cake-enclose">
<div class="cake">
<div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake" style="width: 120px; height: 120px"></div>
</div>
</div>
</div>
</div>
</div>
<div class="background"></div>
</div>
<div class="chart-divisor"></div>
</div>
</div>
When I build my app it generates a "svg" element (as expected) but shows no height whatsoever..
Maybe is there a way I can set up values for width / height in order the svg elements is properly generated?
See generated SVG (with wrong height value)
Share Improve this question edited Sep 7, 2016 at 17:04 letie asked Sep 7, 2016 at 13:39 letieletie 8942 gold badges11 silver badges25 bronze badges 3- instead of height : 120 try height : parseInt(120) while setting height value – Sharan De Silva Commented Sep 7, 2016 at 13:46
- Thank you for answering, but it still doesn't work :/ – letie Commented Sep 7, 2016 at 14:05
- @LetieTecher did you solved this issue ? i am facing the same issue. i use angular-chart lib – Umair Ahmed Commented Sep 7, 2016 at 20:40
2 Answers
Reset to default 5By Seeing Code and by behavior of the bug i guess there is issue with selection of chart
<div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake" height="120" width="120"></div>
ac-chart="'pie'" causes issue
So may be you can try with just using pie instead of 'pie'
I Faced the same error when i was trying to render the chart on a container which wasn't added to dom. So
Make sure your chart container is added to dom, before drawing the chart.
let container = document.createElement('div');
new ApexCharts(container, {}) // <----- NOW YOU GET THE MENTIONED ERROR. container is not in dom.
parentElement.appendChild(container); // <-- you add the chart container to dom. But it's late!
To fix it, make sure you First add the container to dom, then ask the appexcharts to render the chart :
parentElement.appendChild(container); // <-- First add the container to dom
new ApexCharts(container, {}) // <----- After that, render the chart.
本文标签： javascriptError ltsvggt attribute height Expected lengthquotNaNquotStack Overflow
版权声明：本文标题：javascript - Error: <svg> attribute height: Expected length, "NaN" - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741244103a2364544.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论