使用 C3.js 添加图像

Question

我正在尝试将图像添加到我在 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'

});

非常感谢任何帮助。

Answer 1

您可以将图像插入圆环图的中心节点 - .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。

使用 C3.js 添加图像

Adding an image with C3.js

javascript

d3.js

c3.js