javascript - Error: <svg> attribute height: Expected length, "NaN" -
i trying generate pie charts angular charts, when build app keep getting errors:
error: attribute height: expected length, "nan"
error: attribute transform: trailing garbage, "translate(60,nan)"
i have tried didn't work here 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 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 build app generates "svg" element (as expected) shows no height whatsoever..
maybe there way can set values width / height in order svg elements generated?
by seeing code , behavior of bug guess there issue 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 can try using pie instead of 'pie'
Comments
Post a Comment