gpt4 book ai didi

javascript - 使用 C3.js 添加图像

转载 作者:行者123 更新时间:2023-11-28 04:32:56 26 4
gpt4 key购买 nike

我正在尝试将图像添加到用 C3.js 制作的图表中

我需要将图像放在图表的中心,并且我在一页上有 6 个这样的图表。

Example of what I have now.我想用图像替换运输等文本。

这是我用来生成图表的代码。

    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/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com