我正在使用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);
}
});