2014-05-13 2 views
8

Ich möchte einige Bilder und/oder Links in die Etiketten meines Diagramms einfügen. Hier ist der Beispielcode und jsFiddle:HTML in Chart.js Etiketten

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

Wie Sie sehen können, ist die HTML nicht in Etiketten analysiert. Gibt es eine Möglichkeit, Arbeitsbilder und/oder Links in den Etiketten des Diagramms zu haben?

+1

Ihre Geige funktioniert nicht in Chrome: Weigerte sich, Skript von 'https://raw.githubusercontent.com/nnnick/Chart.js/master/Chart.min.js' auszuführen, da sein MIME-Typ ('text/plain ') ist nicht ausführbar und die strikte MIME-Typüberprüfung ist aktiviert. – alcfeoh

Antwort

1

Mit Blick auf die Chart.js source code scheint es, dass Etiketten mit dem Befehl fillText gerendert werden. fillText(text, x, y [, maxWidth]) akzeptiert nur eine einfache Textzeichenfolge und so wird Ihre HTML-Zeichenfolge als einfacher Text dargestellt und alle Tags werden ignoriert.

Eine mögliche Option wäre zu prüfen, den Chart.js Code zu modifizieren ein <foreignObject> (auf MDN siehe this Artikel und this eine, die es basiert auf) zu verwenden. Zum Beispiel:

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

(. Ein großer Teil dieses Code ist eine gerade Kopie der Demo präsentierte here von Robert O'Callahan, einfach modifiziert, um eine Kennzeichenkette zu übernehmen und den vorhandenen Chart.js x Label Zeichencode ersetzen)