Chart.js標籤中的HTML

我想在圖表的標籤中放入一些圖像和/或鏈接。這裏的示例代碼和的jsfiddle：Chart.js標籤中的HTML

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是不是內部標籤解析。有沒有辦法在圖表標籤中使用圖像和/或鏈接？

來源

2014-05-13 shrx

你的小提琴在Chrome中不起作用：拒絕執行來自'https://raw.githubusercontent.com/nnnick/Chart.js/master/Chart.min.js'的腳本，因爲它的MIME類型（'text/plain '）不可執行，並且啓用嚴格的MIME類型檢查。 – alcfeoh

看着Chart.js source code它看起來標籤使用fillText命令呈現。 fillText(text, x, y [, maxWidth])只接受純文本字符串，因此您的HTML字符串將呈現爲純文本，並且所有標記都將被忽略。

一個可能的選擇是考慮修改Chart.js代碼以使用<foreignObject>（請參閱this關於MDN的文章和this它基於它的文章）。例如：

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標籤繪製代碼）

來源

2015-10-21 13:11:49

Chart.js標籤中的HTML

回答

相關問題