HTML в ярлыках Chart.js

Question

Я хотел бы добавить несколько изображений и / или ссылок в ярлыки моего графика. Вот пример кода и 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

Как видите, HTML не анализируется внутри меток. Есть ли способ иметь рабочие изображения и / или ссылки на ярлыках диаграммы?

Answer 1

Глядя на исходный код Chart.js, кажется, что этикетки отображаются с использованием fillText команда. fillText(text, x, y [, maxWidth]) принимает только текстовую строку, поэтому ваша HTML-строка будет отображаться как простой текст, а все теги будут игнорироваться.

Один из возможных вариантов - рассмотреть возможность изменения кода Chart.js для использования <foreignObject> (см. эту статью о MDN и ту, на которой она основана). Например:

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

(Большая часть этого кода является прямой копией демонстрации, представленной здесь Робертом О'Каллаханом, просто модифицированной, чтобы принимать строку метки и заменять существующий код рисования метки x Chart.js.)