Chart.js标签中的HTML
Chart.js标签中的HTML
提问于 2014-05-13 20:23:14
我想在我的图表标签中添加一些图像和/或链接。下面是示例代码和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 link
正如您所看到的，HTML不会在标签内部进行解析。有没有办法在图表的标签中包含工作图像和/或链接？
Stack Overflow用户
发布于 2015-10-21 21:11:50
查看Chart.js source code，可以看出标签是使用fillText命令呈现的。fillText(text, x, y [, maxWidth])只接受纯文本字符串，因此您的字符串将呈现为纯文本，并且所有标记都将被忽略。
一种可能的选择是考虑修改Chart.js代码以使用<foreignObject> (请参阅关于MDN的this文章和它所基于的this One )。例如：
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演示的here的直接副本，简单地修改为接受标签字符串并替换现有的Chart.js x标签绘制代码。)
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23631170
复制相关文章
相似问题
腾讯云开发者
