我正在尝试使用 Angular Charts 生成一些饼图，但是当我构建应用程序时，我不断收到错误:
Error: attribute height: Expected length, "NaN"
Error: attribute transform: Trailing garbage, "translate(60,NaN)"
我都试过了，还是不行 这是我的 js 代码:
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",
};
还有我的html代码:
<!--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>
当我构建我的应用程序时，它会生成一个“svg”元素(如预期的那样)但不显示任何高度..
也许我可以设置宽度/高度的值以便正确生成 svg 元素？
最佳答案
通过查看代码和 bug 的行为，我猜图表的选择有问题
<div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake" height="120" width="120"></div>
ac-chart="'pie'" 导致问题
所以也许你可以尝试使用 pie 而不是 'pie'
关于javascript - 错误 : <svg> attribute height: Expected length, "NaN"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39371497/