Объектный литерал может указывать только известные свойства, а «center» не существует в типе «IndividualSeriesOptions» - PullRequest
0 голосов
/ 09 января 2019

Я использую угловые диаграммы для создания нескольких круговых диаграмм, так как я хочу применить некоторые свойства к обоим графикам, отличающиеся друг от друга, например center, showInLegend и startAngle. но он дает ошибку для всех 3 свойств, так как он не определен в опциях серии, использую ли я также свойство title, это также не определено, но для этого я нашел обертку для этого, но не смог сделать это для этих трех свойств я также предоставляю свой графовый код и оболочку, если кто-то может помочь, это будет заметно, заранее спасибо.

const pChart = new Chart({
        chart: {
            type: 'pie'
        },
        tooltip: {
            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
        },
        title: {
            text: ''
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    formatter: function () {
                        return Math.round(this.percentage * 100) / 100 + ' %';
                    },
                    distance: -30,
                    color: '#000'
                },
                colors: ['#e48701', '#a5bc4e'],
                size: 200,
                borderColor: 'none',
                shadow: true
            },
            series: {
                point: {
                    events: {
                        legendItemClick: function () {
                            return false; // <== returning false will cancel the default action
                        }
                    }
                },
                cursor: 'pointer',
                animation: this.isAnimation,
                events: {
                    click: (event) => {
                        this.isAnimation = false;
                        for (let j = 0; j < this.qecData.length; j++) {
                            this.select[j] = this.qecData[j].reasonForDebit === event.point.name;
                            if (this.select[j]) {
                                this.data = this.qecData[j].details;
                                freqData[j].sliced = amtData[j].sliced = freqData[j].selected = amtData[j].selected = true;
                                this.generateGraph(freqData, amtData);
                            } else {
                                freqData[j].sliced = amtData[j].sliced = freqData[j].selected = amtData[j].selected = false;
                            }
                        }
                    }
                }
            }
        },
        series: [
            {
                name: 'Frequency',
                data: freqData,
                center: ['20%', '55%'],
                showInLegend: true,
                startAngle: 270,
                title: {
                    align: 'center',
                    text: 'Frequency Graph',
                    verticalAlign: 'top',
                    y: -30,
                    style: {
                        color: '#869ca7'
                    }
                }
            },
            {
                name: 'Amount',
                data: amtData,
                center: ['80%', '55%'],
                showInLegend: false,
                startAngle: 180,
                title: {
                    align: 'center',
                    text: 'Amount Graph',
                    verticalAlign: 'top',
                    y: -30,
                    style: {
                        color: '#869ca7'
                    }
                }
            }
        ]
    });

И обертка это:

Highcharts.wrap(Highcharts.seriesTypes.pie.prototype, 'render', function (proceed) {
        const chart = this.chart,
            center = this.center || (this.yAxis && this.yAxis.center),
            titleOption = this.options.title;
        let box;

        proceed.call(this);
        if (center && titleOption) {
            box = {
                x: chart.plotLeft + center[0] - 0.5 * center[2],
                y: chart.plotTop + center[1] - 0.5 * center[2],
                width: center[2],
                height: center[2]
            };
            if (!this.title) {
                this.title = this.chart.renderer.label(titleOption.text)
                    .css(titleOption.style)
                    .add();
            }
            const labelBBox = this.title.getBBox();
            if (titleOption.align === 'center') {
                box.x -= labelBBox.width / 2;
            } else if (titleOption.align === 'right') {
                box.x -= labelBBox.width;
            }
            this.title.align(titleOption, null, box);
        }
    });
...