Я пытаюсь добавить изображение в свой график, сделанный в C3.js
Мне нужно, чтобы изображение сидело в центре графика, и у меня есть 6 из этих графиков на одной странице.
Я хочу вместо этого заменить текст транспорта и т.д.
Вот код, который я использую для генерации графиков.
var transport = c3.generate({
data: {
columns: [
['Labour', labourLikes],
['Greens', greensLikes],
['National', nationalLikes],
['United Future', unitedfutureLikes],
['ACT', actLikes],
['NZ First', nzfirstLikes],
],
type: 'donut',
colors: {
Labour: '#D82C20',
Greens: '#00C760',
National: '#0B6FAA',
'United Future': '#40003F',
ACT: '#FFDE00',
'NZ First': '#000',
},
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
donut: {
title: "Education"
},
legend: {
show: false
},
bindto: '#education'
});
Буду признателен за любую оказанную помощь.
Вы можете вставить изображение в центральный узел диаграммы пончиков - .c3-chart-arcs
oninit: function() {
var element = this.selectChart[0][0]
var center = d3
.select(element)
.select('.c3-chart-arcs')
.insert('image',':first-child')
.attr('x', -75)
.attr('y', -75)
.attr('width', 150)
.attr('height', 150)
.attr('xlink:href', 'http://pngimages.net/sites/default/files/small-png-image-20665.png')
}
Смотрите эту скрипку.