2
我想产生一些饼图与角图表，但是当我建立应用程序，我不断收到错误：错误：<svg>属性高度：预计长度，“南”
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元素正确产生的？
See generated SVG (with wrong height value)
而不是 身高：120 尝试 身高：parseInt（120）虽然设置身高值 –
谢谢你的回答，但它仍然不起作用：/ –
@LetieTecher你解决了这个问题吗？ 我面临同样的问题。 我使用[angular-chart lib]（http://chinmaymk.github.io/angular-charts/） –