Angular 以角度打印数据显示问题

目前，在饼图的第一部分结束处绘制垂直线。因此，它将覆盖标题，在某些情况下，文本将被隐藏。在所有情况下都需要在底部显示垂直线

下面是我的组件

import {
    Component,
    Input,
    AfterViewInit,
    NgZone,
    ChangeDetectionStrategy,
    OnChanges,
    Output,
    EventEmitter
} from '@angular/core';

declare var Plotly: any;

/**
 * Custom typing for plotly
 * TODO :: Use provided .d.ts
 */
export interface IPlotLayout {
    title: string;
    autosize: boolean;
    showlegend: boolean;
    separators: string;
    hidesources: boolean;
    xaxis: any;
    yaxis: any;
    yaxis2: any;
    margin: any;
    height: number;
    width: number;
    hovermode: 'closest' | 'x' | 'y' | false;
    hoverlabel: any;
    direction: 'clockwise' | 'counterclockwise';
    orientation: 'v' | 'h';
    legend: any;
    font: any;
    barmode: string;
    annotations: any;
}

@Component({
    selector: 'plot',
    template: `
        <div>
            <div id="chart{{ id }}"></div>
        </div>
    `,
    changeDetection: ChangeDetectionStrategy.OnPush
})
export class PlotlyComponent implements AfterViewInit, OnChanges {
    @Input() name: string;
    @Input() data: any[];
    @Input() layout: Partial<IPlotLayout>;
    @Input() options: any;
    @Input() id: string = '';
    @Input() style: {} = {};
    //is the view initialized for plotly.js to take action
    viewInitialized: boolean = false;
    @Input() downloadCSV: boolean = false;
    @Output() exportToCSV = new EventEmitter();

    _container;

    constructor(private zone: NgZone) { }

    ngAfterViewInit() {
        let d3 = Plotly.d3,
            WIDTH_IN_PERCENT_OF_PARENT = 95,
            HEIGHT_IN_PERCENT_OF_PARENT = 95;
        let style = {
            width: WIDTH_IN_PERCENT_OF_PARENT + '%',
            'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',

            height: HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
            'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
        };
        if (Object.keys(this.style).length > 0) {
            style = { ...style, ...this.style };
        }
        let gd3 = d3
            .select(`#chart${this.id}`)
            .append('div')
            .style(style);
        this._container = gd3.node();

        /**
         * On the first run, plot the graph after view has been initialized('div' exists)
         * After that, all subsequent plot changes should be handled by OnChanges hook
         */
        this.update();
        this.viewInitialized = true;
    }

    ngOnChanges() {
        if (this.viewInitialized) {
            this.update();
        }
    }

    update() {
        /**
         * Plot the graph outside change detection
         * TODO :: Investigate bubbling up chart events for future scaling
         * TODO :: Try adding animations on update...
         */
        let self = this;
        this.zone.runOutsideAngular(() => {
            self.appendCustomExport();
            Plotly.newPlot(
                self._container,
                self.data,
                self.layout,
                self.options
            );
        });
    }
}

导入{
组成部分，
输入，
AfterViewInit，
NgZone，
改变检测策略，
一旦改变，
产出，
事件发射器
}从“@angular/core”开始；
明确声明：任何；
/**
*用于plotly的自定义键入
*TODO:：使用提供的.d.ts
*/
导出接口IPlotLayout{
标题：字符串；
自动调整大小：布尔值；
显示图例：布尔；
分隔符：字符串；
隐藏源：布尔；
xaxis：任何；
雅克西斯：任何；
yaxis2：任何；
保证金：任何；
高度：数字；
宽度：数字；
悬停模式：“最近的”|“x”|“y”|错误；
标签：任何；
方向：“顺时针”|“逆时针”；
方向：“v”|“h”；
图例：任何；
字体：任意；
模式：字符串；
注释：任何；
}
@组成部分({
选择器：“绘图”，
模板：`
`,
changeDetection:ChangeDetectionStrategy.OnPush
})
导出类PlotlyComponent在ViewInit、OnChanges之后实现{
@Input（）名称：string；
@输入（）数据：任意[]；
@Input（）布局：局部；
@输入（）选项：任意；
@Input（）id:string=''；
@Input（）样式：{}={}；
//视图是否已初始化，以便plotly.js执行操作
viewInitialized:boolean=false；
@Input（）下载CSV:boolean=false；
@Output（）exportToCSV=新的EventEmitter（）；
_容器；
构造函数（专用区域：NgZone）{}
ngAfterViewInit（）{
设d3=Plotly.d3，
宽度（单位：父项的百分比）为95，
高度（以父项的百分比表示）=95；
让样式={
宽度：宽度（单位为父项+'%'的百分比），
“左边距”：（100-宽度单位，单位为单位父项的百分比）/2+“%”，
高度：高度（单位：父项的百分比）+“vh”，
“页边距顶部”：（100-高度单位，单位为单位母材的百分比）/2+“vh”
};
if（Object.keys（this.style）.length>0）{
style={…style，…this.style}；
}
设gd3=d3
.select（`chart${this.id}`）
.append（'div'））
.风格（风格）；
这个._container=gd3.node（）；
/**
*在第一次运行时，在视图初始化后绘制图形（“div”存在）
*之后，所有后续的绘图更改都应该由OnChanges钩子处理
*/
这个.update（）；
this.viewInitialized=true；
}
ngOnChanges（）{
if（this.viewInitialized）{
这个.update（）；
}
}
更新（）{
/**
*在变化检测外部绘制图形
*TODO:：调查冒泡的图表事件，以便将来进行缩放
*TODO:：尝试在更新时添加动画。。。
*/
让自我=这个；
此.zone.runOutsideAngular（（）=>{
self.appendCustomExport（）；
Plotly.newPlot(
自包装容器，
自我数据，
自我布局，
自我选择
);
});
}
}

数据是动态的，饼图可能包含一个或多个部分

另一个案例

---

我建议您先确定图表大小

在任何情况下，如果饼图的大小与容器的大小相同，则在悬停时显示图例和其他信息总是会产生问题。所以，把你的饼图缩小一些。馅饼半径不应超过容器高度的40%

要避免按绘图进行排序，请将以下内容传递到数据数组：

data: [sort:false]

---

我希望它能让您实现预期的布局。

请将您的代码添加到问题中。请查收