对象文字只能指定已知的属性,类型“ IndividualSeriesOptions”中不存在“ center”

时间:2019-01-09 07:44:34

标签: angular highcharts angular2-highcharts

我正在使用angular-highcharts创建多个饼图,因为我想对这两个图应用不同的属性,例如center,showInLegend和startAngle。 但是它给所有3个属性带来了错误,因为它不是在系列选项中定义的,是否我也使用了title属性,那个属性也没有定义,但是为此我找到了一个包装器,但是没有做到对于这3个属性,我还要提供我的图形代码和包装器,如果有人可以提供帮助,那将是非常感谢的。

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

0 个答案:

没有答案