Я использую угловые диаграммы для создания нескольких круговых диаграмм, так как я хочу применить некоторые свойства к обоим графикам, отличающиеся друг от друга, например 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);
}
});