HTML trong nhãn Chart.js

Question

Tôi muốn đặt một số hình ảnh và/hoặc liên kết trong các nhãn của biểu đồ của tôi. Dưới đây là đoạn code ví dụ và 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

Như bạn có thể thấy, không hỗ trợ HTML phân tích cú pháp bên trong nhãn. Có cách nào để có hình ảnh và/hoặc liên kết hoạt động trong các nhãn của biểu đồ không?

Answer 1

Nhìn vào Chart.js source code có vẻ như nhãn được hiển thị bằng lệnh fillText. fillText(text, x, y [, maxWidth]) chỉ chấp nhận một chuỗi văn bản thuần túy và do đó chuỗi HTML của bạn sẽ được hiển thị dưới dạng văn bản thuần túy và tất cả các thẻ sẽ bị bỏ qua.

Một tùy chọn có thể là xem xét sửa đổi mã Chart.js để sử dụng <foreignObject> (xem bài viết this trên MDN và this bài viết dựa trên đó). Ví dụ:

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

(. Phần lớn mã này là một bản sao thẳng của bản demo giới here bởi Robert O'Callahan, chỉ cần sửa đổi để chấp nhận một chuỗi nhãn và thay thế mã vẽ Chart.js x nhãn hiện có)