javascript - 错误:<svg>属性高度:预期长度,“NaN”

原文 标签 javascript angularjs svg charts height

我正在尝试使用Angular Charts生成一些饼图,但是在构建应用程序时,我不断遇到错误:


  错误:属性高度:预期长度,“ NaN”
  
  错误:属性转换:尾随垃圾,“ 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)

最佳答案

通过查看代码和错误的行为,我想图表选择存在问题

 <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>属性高度:预期长度,“NaN”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39371497/

相关文章:

javascript - 无法使用 lodash 更改对象键值

javascript - 如何在 spring-boot :run 之后显示 svg 图标

javascript - 在Backbone.js中获取URL片段而不是哈希

javascript - 如何根据选择的选项将数据输出到表

Javascript Regex 匹配除双空格以外的所有内容,然后替换

javascript - 输入焦点时没有 ng-model 更新

javascript - 使五个宽度为25%的左侧 float 元素继续在屏幕外 float

javascript - 防止 AngularJS $http 超时返回

Python SVG 解析器

css - 如何使模糊效果在IE中工作