Chart.js中实现自定义图表点元素的两种方法

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

// 这种注册方式对于PointElement通常无效
Chart.register({
    id: 'customPointElement',
    element: CustomPointElement,
});

// 1. 定义您的自定义点元素类
class CustomPointElement extends Chart.elements.PointElement {
    draw(ctx, area) {
        // 在这里添加您的自定义绘制逻辑
        // 例如，我们可以在默认绘制的基础上增加一个额外的标记
        super.draw(ctx, area); // 调用父类的draw方法绘制默认点

        const { x, y } = this.getProps(['x', 'y']);
        const radius = this.options.radius || 5; // 获取点半径

        ctx.save();
        ctx.beginPath();
        ctx.arc(x, y, radius / 2, 0, Math.PI * 2); // 绘制一个更小的圆
        ctx.fillStyle = 'red'; // 填充红色
        ctx.fill();
        ctx.restore();

        console.log("CustomPointElement draw called!"); // 验证是否被调用
    }
}

// 2. 全局替换Chart.js的PointElement
Chart.elements.PointElement = CustomPointElement;

// 3. 创建图表实例，它将使用新的CustomPointElement
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: 'blue',
            borderColor: 'blue'
        }]
    },
    options: {
        // 其他图表选项
    }
});

// 1. 定义一个函数，用于生成自定义的canvas点样式
const customPointCanvas = function(context) {
    const options = context.options; // 从context中获取点元素的选项
    const cvs = document.createElement('canvas');
    const ctx = cvs.getContext('2d');
    const radius = options.pointRadius || 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.lineWidth = options.borderWidth || 1; // 使用数据集的边框宽度
    ctx.fill();
    ctx.stroke();

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

// 2. 创建图表实例，并在数据集配置中应用pointStyle
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)',
            pointStyle: customPointCanvas // 应用自定义点样式函数
        },
        {
            label: '# of Sales',
            data: [5, 10, 15, 8, 12, 7],
            borderWidth: 1,
            pointRadius: 8,
            backgroundColor: 'rgba(255, 99, 132, 0.6)',
            borderColor: 'rgba(255, 99, 132, 1)',
            pointStyle: 'rectRot' // 另一个数据集可以使用默认样式或不同自定义样式
        }]
    },
    options: {
        // 其他图表选项
    }
});

<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>