import Chart from antvg2;const data = item 事例一 count 40 percent 04 item 事例二 count 21 percent 021 item 事例三 count 17 percent 017 item 事例四 count 13 percent 013 item 事例五 count 9 percent 0
根据您提供的代码,注释中的部分代码存在问题。具体来说,以下是需要修改的部分:
-
注释掉的代码段中的第一行
const foregroundGroup = chart.foregroundGroup;需要注释掉,因为foregroundGroup不再使用。 -
注释掉的代码段中的第6行
const elements = interval.elements;需要修改为const elements = chart.geometries[0].elements;,因为interval不在代码中定义。 -
注释掉的代码段中的第21行
const coordinate = chart.getCoordinate();需要修改为const coordinate = chart.getCoordinateByIndex(0);,因为getCoordinate方法需要传入索引参数。 -
注释掉的代码段中的第40行
let firstPoint1;和第41行let firstPoint2;需要移动到updateAnnotation函数的外部,以便在不同的注释之间保持一致。 -
注释掉的代码段中的第68行
const data = element.getData();需要修改为const data = element.data;,因为getData方法已被弃用。 -
注释掉的代码段中的第69行
if (stateStatus) {需要修改为if (stateStatus === 'active') {,因为stateStatus的值为字符串'active'。 -
注释掉的代码段中的第75行
innerView.render(true);需要修改为innerView.render();,因为render方法不再接受参数。
修改后的代码如下:
chart.on('afterrender', () => {
// label 绘制图层
let labelGroup = chart.foregroundGroup.findById('customLabels');
if (labelGroup) {
labelGroup.clear();
} else {
labelGroup = chart.foregroundGroup.addGroup({
capture: false,
id: 'customLabels'
});
}
const offset = 30; // 拐点折线的长度
const textOffset = 8;
const elements = chart.geometries[0].elements;
const coordinate = chart.getCoordinateByIndex(0);
const center = coordinate.getCenter();
const radius = coordinate.getRadius();
const count = elements.length;
let preWidth = 0;
let firstPoint1; // 第一个 label 的第一个点
let firstPoint2; // 第一个 label 的拐点
for (let i = 0; i < count; i++) {
const label = labelGroup.addGroup();
const element = elements[i];
const originData = element.data;
const mappingData = element.getModel();
if (i === count - 1) {
// 最后一个图形 label 横着长
label.addShape('path', {
attrs: {
path: [
['M', center.x, center.y],
['L', center.x + radius + offset, center.y],
],
stroke: mappingData.color,
lineWidth: 1,
},
});
label.addShape('text', {
attrs: {
x: center.x + radius + offset + textOffset,
y: center.y,
text: originData.count + originData.count,
textBaseline: 'middle',
fill: '#000',
},
});
} else {
const nextElement = elements[i + 1];
const nextBBox = nextElement.getBBox();
const bbox = element.getBBox();
// 第一个点
const width = bbox.maxX - nextBBox.maxX;
const pointRadius = radius - preWidth - (width / 2);
const point1 = Util.polarToCartesian(center.x, center.y, pointRadius, - 3 * Math.PI / 8 + (Math.PI / 8) * i);
let point2;
if (i === 0) {
point2 = {
x: bbox.maxX,
y: bbox.minY
};
firstPoint2 = point2;
firstPoint1 = point1;
} else {
point2 = {
x: Math.min(firstPoint2.x + point1.x - firstPoint1.x, elements[0].getBBox().maxX),
y: firstPoint2.y + point1.y - firstPoint1.y,
};
}
const point3 = {
x: point2.x + offset,
y: point2.y
};
label.addShape('path', {
attrs: {
path: [
['M', point1.x, point1.y],
['L', point2.x, point2.y],
['L', point3.x, point3.y],
],
stroke: mappingData.color,
lineWidth: 1,
},
});
label.addShape('text', {
attrs: {
x: point3.x + textOffset, // 加个偏移量
y: point3.y,
text: originData.count + ': ' + originData.count,
textBaseline: 'middle',
fill: '#000',
},
});
preWidth += width;
}
}
});
请注意,上述代码仅为修改后的注释部分,并假设其他部分的代码没有问题。如果还有其他问题,请提供更多细节以便进一步帮助
原文地址: https://www.cveoy.top/t/topic/iFZV 著作权归作者所有。请勿转载和采集!