HTML nelle etichette Chart.js

Question

Vorrei inserire alcune immagini e/o collegamenti nelle etichette della mia tabella. Ecco il codice di esempio e 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

Come si può vedere, il codice HTML non viene analizzato all'interno etichette. C'è un modo per avere immagini e/o collegamenti funzionanti nelle etichette del grafico?

Answer 1

Guardando lo Chart.js source code sembra che le etichette siano visualizzate usando il comando fillText. fillText(text, x, y [, maxWidth]) accetta solo una stringa di testo semplice e quindi la stringa HTML verrà renderizzata come testo normale e tutti i tag verranno ignorati.

Un'opzione possibile sarebbe quella di considerare la modifica del codice Chart.js per utilizzare un <foreignObject> (vedi articolo su this MDN e this quella che si basa su). Per esempio:

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

(. Gran parte di questo codice è una copia diretta della demo presentata da Robert here O'Callahan, semplicemente modificato per accogliere una serie di etichette e sostituire il codice esistente disegno Chart.js x etichetta)