如何在ChartJS雷达图上标注坐标轴?

ufj5ltwl  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(180)

我阅读了所有的文档,并在互联网上搜索,试图在ChartJS 3.9.1上实现以下(所附图像)。是否有可能在ChartJS上标记雷达图上的每个轴?radar chart

cgh8pdjw

cgh8pdjw1#

我遇到了和你一样的问题,找到了这个解决方案:
定义要作为标签的base64图像数组

const labelImages = [
    /* Image 2 */ 'data:image/png;base64,iVBORw0KGg......',
    /* Image 1 */ 'data:image/png;base64,iVBORw0KGgoAA.....'
]

然后使用插件:

plugins: [
    {
    id: 'Label images',
    afterDraw: (chart) => {
        for (const i in chart.scales.r._pointLabelItems) {
            const point = chart.scales.r._pointLabelItems[i];
            var image = new Image();
            image.src = labelImages[i];
            // you I had 20x20 images thats why I use 20x20
            chart.ctx.drawImage(image, point.x - 10, point.y, 20, 20);
            }
        }
    }
]

Draw image from context options
这个解决方案在标签所在的地方绘制图像(我认为是从标签开始的地方),如果你只想要图像而不想要文本,那么你应该隐藏标签。我是这样做的:

options: {
    // just so that the images are not outside the canvas
    layout: {
        padding: 20
    },
    scales: {
        y: {
            display: false
        },
        x: {
            display: false
        },
        r: {
            pointLabels: {
                // Hides the labels around the radar chart but leaves them in the tooltip
                callback: function (label, index) {
                    return ' ';
                }
            }
        }
    }
}

我希望这对你有帮助

相关问题