如何在 Chart.js 中定制图表点元素：深入解析与最佳实践

class CustomPointElement extends Chart.elements.PointElement {
    draw(ctx, area) {
        console.log("custom draw called"); // 此行代码不会被执行
        super.draw(ctx, area);
        // 自定义绘图逻辑
    }
}

// 尝试注册自定义点元素，但此方法对元素无效
Chart.register({
    id: 'customPointElement',
    element: CustomPointElement,
});

// ... Chart 初始化代码 ...

// 定义你的自定义点元素类
class CustomPointElement extends Chart.elements.PointElement {
    draw(ctx, area) {
        // 在这里实现你的自定义绘图逻辑
        // 例如，绘制一个自定义形状，或者在默认点周围添加额外元素
        console.log("CustomPointElement draw called!"); // 现在会执行
        super.draw(ctx, area); // 调用父类的draw方法以保留默认行为
        // 示例：在点上方绘制一个文本
        ctx.save();
        ctx.font = "10px Arial";
        ctx.fillStyle = "black";
        ctx.textAlign = "center";
        ctx.fillText("Custom", this.x, this.y - this.options.radius - 5);
        ctx.restore();
    }
}

// 在 Chart.js 初始化之前，全局替换默认的 PointElement
Chart.elements.PointElement = CustomPointElement;

// Chart.js 图表初始化代码
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1,
            pointRadius: 10, // 依然可以通过配置控制半径
            backgroundColor: 'rgba(255, 99, 132, 0.2)',
            borderColor: 'rgba(255, 99, 132, 1)',
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
    }
});

/**
 * 生成一个自定义的 Canvas 元素作为点样式
 * @param {object} context - Chart.js 提供的上下文对象，包含数据索引、数据集索引等
 * @param {object} options - 当前点的配置选项，如 pointRadius, backgroundColor, borderColor 等
 * @returns {HTMLCanvasElement} - 绘制好的 Canvas 元素
 */
const customPointCanvas = function(context, options) {
    const cvs = document.createElement('canvas');
    const ctx = cvs.getContext('2d');
    const radius = options.pointRadius || 5; // 获取点的半径，默认为5

    cvs.height = 2 * radius;
    cvs.width = 2 * radius;

    // 绘制一个五角星示例
    const nSpikes = 5; // 星星的角数
    const x0 = cvs.width / 2;
    const y0 = cvs.height / 2;

    ctx.beginPath();
    for (let i = 0; i < nSpikes * 2; i++) {
        const rotation = Math.PI / 2; // 调整起始角度使星星尖角朝上
        const angle = (i / (nSpikes * 2)) * Math.PI * 2 + rotation;
        // 交替使用外半径和内半径来绘制星形
        const dist = (i % 2 === 0 ? radius : radius / 2);
        const x = x0 + Math.cos(angle) * dist;
        const y = y0 + Math.sin(angle) * dist;

        if (i === 0) {
            ctx.moveTo(x, y);
        } else {
            ctx.lineTo(x, y);
        }
    }
    ctx.closePath();

    // 根据点的配置选项填充和描边
    ctx.fillStyle = options.backgroundColor;
    ctx.strokeStyle = options.borderColor;
    ctx.fill();
    ctx.stroke();

    return cvs;
};

// Chart.js 图表初始化代码
const ctx = document.getElementById('myChart');
const myChart = new Chart(ctx, {
    type: 'line',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            borderWidth: 1,
            pointRadius: 10, // 可以通过配置控制半径
            backgroundColor: 'rgba(75, 192, 192, 0.6)',
            borderColor: 'rgba(75, 192, 192, 1)',
            // 使用自定义的 Canvas 函数作为 pointStyle
            pointStyle: customPointCanvas
        },
        {
            label: '# of Sales',
            data: [5, 15, 8, 12, 7, 10],
            borderWidth: 1,
            pointRadius: 8,
            backgroundColor: 'rgba(255, 159, 64, 0.6)',
            borderColor: 'rgba(255, 159, 64, 1)',
            // 另一个数据集可以使用不同的点样式或默认样式
            pointStyle: 'triangle' // 例如，使用内置的三角形样式
        }]
    },
    options: {
        responsive: true,
        maintainAspectRatio: false,
    }
});

<div style="height: 400px; width:98vw">
    <canvas id="myChart"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.umd.js" integrity="sha512-CMF3tQtjOoOJoOKlsS7/2loJlkyctwzSoDK/S40iAB+MqWSaf50uObGQSk5Ny/gfRhRCjNLvoxuCvdnERU4WGg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>