我正在尝试将图像添加到用 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')
}
参见this fiddle .
关于javascript - 使用 C3.js 添加图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44471664/