Chart.js标签中的HTML

Question

我想在我的图表标签中放一些图像和/或链接.这是示例代码和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未在标签内解析.有没有办法在图表的标签中显示工作图像和/或链接？

Answer 1

查看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 标签绘制代码。）