角度数据显示问题

Question

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

下面是我的组件

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
            );
        });
    }
}

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

另一种情况

enter image description here

Answer 1

我建议您先处理图表大小。

在任何情况下，如果饼图与容器的大小相同，它将始终会产生问题，在悬停时显示图例和其他信息。因此，使饼图变小。饼图半径不应超过容器高度的40％。

为了避免按图排序，请将以下内容传递给数据数组：

data: [sort:false]

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