Error: <svg> attribute height: Expected length, "NaN"

Question

我正在尝试使用 Angular 图表生成一些饼图，但是当我构建应用程序时，我不断收到错误消息：

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)

Answer 1

通过查看代码和 bug 的行为，我猜图表的选择有问题

 <div ac-chart="'pie'" ac-data="survey.chartData" ac-config="vm.config" class="cake"  height="120" width="120"></div>

ac-chart="'pie'" 导致问题

所以也许你可以尝试只使用馅饼而不是 'pie'

Answer 2

当我尝试在未添加到 dom 的容器上呈现图表时，我遇到了同样的错误。所以

确保您的图表容器已添加到 dom，然后再绘制图表。

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!

要修复它，请确保您首先将容器添加到 dom，然后让 appexcharts 呈现图表：

parentElement.appendChild(container); // <-- First add the container to dom
new ApexCharts(container, {}) // <----- After that, render the chart.

Error: <svg> attribute height: Expected length, "NaN"

Error: <svg> attribute height: Expected length, "NaN"

javascript

height

charts

svg

angularjs