Chart.js Круговая диаграмма: Как установить фоновое изображение для сегмента

Question

Я использую Chart.js для создания круговой диаграммы (см. Ниже). Вместо цветов в каждом сегменте пирога, я хотел бы использовать фоновое изображение.

Не могли бы вы дать мне указатель на то, как я мог это сделать?

Спасибо!

var data = [ 
    { 
     value: 300, 
     color:"#F7464A", 
     highlight: "#FF5A5E", 
     label: "Red" 
    }, 
    { 
     value: 50, 
     color: "#46BFBD", 
     highlight: "#5AD3D1", 
     label: "Green" 
    } 
]; 
var myPieChart = new Chart(ctx[0]).Pie(data,options); 

Answer 1

Подкласс Pie, переписать инициализатору и AddData - в инициализатора Переопределение дро, добавив одну строку:

if(this.bg_img)ctx.fillStyle=ctx.createPattern(this.bg_img,"repeat"); 

, сразу после того, он говорит:

ctx.fillStyle = this.fillColor; 

(копия Вытяните ничью, добавьте эту строку - или просто скопируйте мой подкласс AltPie снизу прикрепленной скрипки). Это может быть иначе для более поздних версий, но так выглядит Chart.js 1.01.

Также в вашем подклассе Pie вы добавите свойство (например, назовите его bg_img) для отправки фонового изображения. Для этого есть одна линия дополнение к этому, поэтому повторно определить AddData внутри AltPie и добавьте свойство внутри сращивания линии:

bg_img : segment.bg_img, 

, например, где-то около линии

fillColor : segment.color, 

Это большинство он - кроме того, что вы загрузите, а затем присоедините изображения к данным, которые вы делаете с диаграммой. Для того, чтобы загрузить их можно использовать

....img=new Image();...img.src=...and - img.onload=function()(..recurse-load-next, 

с рекурсии обратного вызова аналогично решению № 2 с этой страницы: stackoverflow.com/questions/4960111/image-as-a-background-to-a-drawn-shape
Я думаю, что вы должны убедиться, что изображения загрузится перед подключением их к данным и отправляя их на средство отображения Chart.js, поэтому шаблон рекурсии загружает их один за другим, прежде чем прикреплять их к данным диаграммы, а затем создает новую диаграмму AltPie.

Конечный результат заключается в том, что ваши изображения будут отображаться на фоне фрагментов пирога, или вы можете использовать цветной фон, если изображение отсутствует. Он изменяет html5 холст печатного рисунка

(ctx.fillStyle=ctx.createPattern(this.bg_img,"repeat")) 

быть изображение, которое вы привязаны к данным диаграммы, также взяты из раствора № 2 от той же странице: stackoverflow.com/questions/4960111/image-as-a-background-to-a-drawn-shape.

Для полного рабочего примера см приложенного скрипку https://jsfiddle.net/arlon_arriola/pkwftkp2/

Зависимости для загрузки страницы являются Chart.js файл (v1.01?) (Который просто копировать/вставить в скрипку в верхней части делает код выглядят очень долго, но код relvant находится в самом низу), а также изображения внутри вашей папки ./imgs/patterns/ и ссылки на некоторые размещенные jquery (1.9?). (и тег тела)

Я уверен, что вы тоже можете получить опрос изображений, просто прикрепите два изображения к данным, выясните, где он повторно рисует для зависания и изменяют его так же, как и обычный розыгрыш.