Chart.js etiketlerinde HTML

Question

Grafiğimin etiketlerine birkaç resim ve/veya link koymak istiyorum. İşte örnek kod ve 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

Gördüğünüz gibi, HTML etiketleri içine değil ayrıştırılır. Grafiğin etiketlerinde çalışma görüntülerine ve/veya bağlantılarına sahip olmanın bir yolu var mı?

Answer 1

Chart.js source code görüntülendiğinde, etiketlerin fillText komutu kullanılarak oluşturulduğu görünür. fillText(text, x, y [, maxWidth]) sadece düz metin dizesini kabul eder ve böylece HTML dizginiz düz metin olarak işlenir ve tüm etiketler dikkate alınmaz.

Olası bir seçenek kullanmak Chart.js kodunu değiştirme düşünün olacak bir <foreignObject> (this MDN'yi konulu makaleyi ve zamanda temel this tane bakınız). Örneğin:

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(); 

(. Bu kodun çoğu demo bir düz kopyası Robert O'Callahan tarafından here sundu, basit bir etiket dizesi kabul etmek ve mevcut Chart.js x etiket çizim kodunu değiştirmek için modifiye)