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標簽繪圖代碼。）