javascript 在Chart JS中创建自定义点元素

我想通过将默认pointElement扩展到我的customPointElement来覆盖它，但是从来没有为我的自定义点调用代码。我不知道如何注册它，或者我所做的是正确的。它只使用默认的绘制逻辑。它从不调用customPointElement

class CustomPointElement extends Chart.elements.PointElement {
    draw(ctx, area) {
        console.log("custom draw")
        super.draw(ctx, area);
        // custom drawing logic here
    }
}

Chart.register({
    id: 'customPointElement',
    element: CustomPointElement,
});

const ctx = document.getElementById('myChart');

// create a new line chart in chartJS
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,
        }]
    },
})

在docs中，点元素不属于可扩展元素，其他类型的元素（弧、条、线）也不属于可扩展元素。也没有机制来选择图表使用的元素的类型（类）。
也许我漏掉了什么，扩展类是正确的，但我很好奇你代码中的注册格式是从哪里来的;这与自定义控制器或刻度的注册不同，后者基于为类设置静态ID并仅调用Chart.register(CustomControllerClass)。
如果你真的想使用自定义点，你可以通过在注册表中用你的类替换标准的PointElement类来实现：

Chart.elements.PointElement = CustomPointElement;

jsFiddle。这有一个缺点，即它不能替代标准PointElement用于某些数据集，而是唯一一个用于所有数据集。
然而，如果你只想做自定义 * 绘图 *，那么在chart.js中有一个标准的、认可的方法来完成它：通过将pointStyle设置为Image或canvas元素。这一点，再加上pointStyle是可脚本化的，允许人们进行有用的自定义绘制，可以访问适用于该点的选项。

const customPointCanvas = function(context, options){
    const cvs = document.createElement('canvas'),
        ctx = cvs.getContext('2d'),
        radius = options.pointRadius || 5;
    cvs.height = 2*radius;
    cvs.width = 2*radius;
    //star from https://stackoverflow.com/a/58043598/16466946
    const nSpikes = 5, x0 = cvs.width/2, y0 = cvs.height/2;
    ctx.beginPath();
    for(let i = 0; i < nSpikes*2; i++){
        const rotation = Math.PI/2,
            angle = (i/(nSpikes*2))*Math.PI*2+rotation,
            dist = radius/2*(i%2)+radius/2,
            x = x0+Math.cos(angle)*dist,
            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;
}

const ctx = document.getElementById('myChart');

// create a new line chart in chartJS
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,
            pointStyle: customPointCanvas
        }]
    },
})

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

javascript 在Chart JS中创建自定义点元素

1条答案

相关问题

热门标签

最新问答