Chart.js 中高级点元素自定义教程：超越默认限制

// 1. 定义自定义点元素类
class CustomPointElement extends Chart.elements.PointElement {
    draw(ctx, area) {
        console.log("自定义点元素正在绘制..."); // 验证自定义方法是否被调用
        // 在此处添加自定义绘制逻辑
        // 例如，可以在默认绘制之前或之后添加额外图形
        super.draw(ctx, area); // 调用父类的draw方法，保留默认点样式作为基础
        // ctx.beginPath();
        // ctx.arc(this.x, this.y, this.options.radius + 5, 0, Math.PI * 2); // 额外绘制一个圆
        // ctx.fillStyle = 'red';
        // ctx.fill();
    }
}

// 2. 替换 Chart.js 默认的 PointElement 类
// 注意：这将影响所有使用 Chart.js 实例的图表中的点元素
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(75, 192, 192, 0.6)',
            borderColor: 'rgba(75, 192, 192, 1)',
        }]
    },
    options: {
        // ... 其他图表选项
    }
});

// 1. 定义一个自定义绘制函数，返回一个Canvas元素
const customPointCanvas = function(context) {
    // context 参数包含当前点的相关信息，如 index, dataset, dataIndex 等
    // options 参数包含点的配置，如 pointRadius, backgroundColor, borderColor 等
    const cvs = document.createElement('canvas');
    const ctx = cvs.getContext('2d');
    const radius = context.options.pointRadius || 5; // 获取点的半径

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

    // 绘制五角星（示例代码来自StackOverflow）
    const nSpikes = 5; // 星星的尖角数量
    const x0 = cvs.width / 2; // 中心X坐标
    const y0 = cvs.height / 2; // 中心Y坐标

    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 = context.options.backgroundColor;
    ctx.strokeStyle = context.options.borderColor;
    ctx.fill();
    ctx.stroke();

    return cvs; // 返回绘制好的 Canvas 元素
};

// 创建一个 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.6)',
            borderColor: 'rgba(255, 99, 132, 1)',
            // 2. 将 pointStyle 设置为自定义绘制函数
            pointStyle: customPointCanvas 
        },
        {
            label: '# of Sales',
            data: [5, 10, 15, 8, 12, 7],
            borderWidth: 1,
            pointRadius: 8,
            backgroundColor: 'rgba(54, 162, 235, 0.6)',
            borderColor: 'rgba(54, 162, 235, 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"></script>