HTML in Chart.js labels

HTML in Chart.js labels

本文关键字：labels js Chart in HTML      更新时间：2023-09-26

我想把一些图像和/或链接在我的图表的标签。下面是示例代码和jsFiddle:

var data = {
    labels: ['January', '<s>February</s>',
    '<img src="http://jsfiddle.net/favicon.png">',
    '<a href="http://jsfiddle.net/">A Link</a>'],
    datasets: [{
        data: [65, 59, 90, 81]
    }]
}
var ctx = document.getElementById("myChart").getContext("2d");
var myNewChart = new Chart(ctx).Bar(data);

jsFiddle联系

如您所见，HTML不会在标签内部被解析。有没有办法在图表的标签中有工作图像和/或链接?

查看Chart.js源代码，似乎标签是使用fillText命令呈现的。fillText(text, x, y [, maxWidth])只接受纯文本字符串，所以你的HTML字符串将被呈现为纯文本，所有的标签将被忽略。

一个可能的选择是考虑修改Chart.js代码使用<foreignObject>(见这篇文章在MDN和这一个是基于)。例如:

ctx.translate(xPos,(isRotated) ? this.endPoint + 12 : this.endPoint + 8);
ctx.rotate(toRadians(this.xLabelRotation)*-1);
var data = "data:image/svg+xml," +
    "<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'>" +
        "<foreignObject width='100%' height='100%'>" +
            "<div xmlns='http://www.w3.org/1999/xhtml'>" +
                label +
            "</div>" +
        "</foreignObject>" +
    "</svg>";
var img = new Image();
img.src = data;
img.onload = function() { ctx.drawImage(img, 0, 0); }
ctx.restore();

(大部分代码都是直接复制Robert O'Callahan在这里展示的演示，只是修改为接受标签字符串并替换现有的Chart.js x标签绘制代码。)

相关文章：