Радарная диаграмма React-ChartJS-2 по-прежнему показывает метки точек по умолчанию, даже если pointLabels.display имеет ⇐ Javascript

[Anonymous]

Я создаю радарную диаграмму в React с использованием реакции-chartjs-2 и Chart.js v4.

Я хочу отключить черные «метки точек» по умолчанию (по кругу), потому что я рисую свои собственные метки с помощью плагина.
Я уже попробовал все очевидные варианты конфигурации, например:

Код: Выделить всё

pointLabels: {
display: false,
callback: () => "",
color: "transparent",
font: { size: 0 },
},

и даже исправляем прототип:

Код: Выделить всё

RadialLinearScale.prototype.drawPointLabels = function () {};

…но метки по умолчанию по-прежнему отображаются поверх моих пользовательских.

Даже установка pointLabels.display = false не удаляет их.
Вот минимальный воспроизводимый пример:

Код: Выделить всё

// complete working example
"use client";
import React from "react";
import { Radar } from "react-chartjs-2";
import {
Chart as ChartJS,
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend,
} from "chart.js";

ChartJS.register(
RadialLinearScale,
PointElement,
LineElement,
Filler,
Tooltip,
Legend
);

const horizontalPointLabelsPlugin = {
id: "horizontalPointLabels",
afterDraw(chart) {
const r = chart.scales.r;
if (!r) return;
const { ctx } = chart;
const labels = chart.data.labels || [];
const n = labels.length;
if (!n) return;

const cx = r.xCenter;
const cy = r.yCenter;
const radius = r.drawingArea + 22;
const angleStep = (2 * Math.PI) / n;
const baseAngle = -Math.PI / 2;

ctx.save();
ctx.font = "14px sans-serif";
ctx.fillStyle = "#6B7280";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
for (let i = 0; i < n; i++) {
const angle = baseAngle + i * angleStep;
const x = cx + Math.cos(angle) * radius;
const y = cy + Math.sin(angle) * radius;
ctx.fillText(labels[i], x, y);
}
ctx.restore();
},
};

const data = {
labels: ["Oqimlilik", "Lug’at", "O’zaro ta’sir", "Talaffuz", "Grammatika"],
datasets: [
{
data: [1.2, 1.1, 1.0, 1.3, 1.15],
backgroundColor: "rgba(37,99,235,0.45)",
borderColor: "#2563EB",
borderWidth: 2,
pointRadius: 0,
},
],
};

const options = {
responsive: true,
maintainAspectRatio: false,
scales: {
r: {
grid: { circular: false, color: "rgba(148,163,253,0.4)" },
angleLines: { display: false },
ticks: { display: false },
pointLabels: {
display: false,
callback: () => "",
color: "transparent",
font: { size: 0 },
},
},
},
plugins: {
legend: { display: false },
tooltip: { enabled: false },
},
};

export default function StatsRadar() {
return (



);
}

Ожидается:

Нет ярлыков по умолчанию, только мои серые пользовательские ярлыки.
Факт:

Черные ярлыки по умолчанию по-прежнему появляются позади или поверх моих собственных ярлыков.
Что я пробовал:

• Код: Выделить всё

  pointLabels.display = false

• Код: Выделить всё

  callback

  возвращает пустую строку
• устанавливает прозрачный цвет и размер шрифта 0
• исправляет RadialLinearScale.prototype.drawPointLabels
• используя плагины, такие как beforeDraw, beforeLayout, afterDraw

Вопрос:

Известна ли эта проблема в Chart.js 4 или response-chartjs-2?

Как я могу полностью запретить Chart.js рисовать встроенные метки точек на лепестковой диаграмме?

Подробнее здесь: https://stackoverflow.com/questions/798 ... en-pointla