ein Bild mit C3.js Hinzufügen

Question

Ich versuche, ein Bild zu meinem Diagramm in C3.js

ich das Bild sitzt in der Mitte des Diagramms haben muß gemacht hinzuzufügen, und ich habe 6 diese Graphen auf einer Seite.

Ich möchte den Text des Transports usw. mit einem Bild stattdessen ersetzen. Hier

ist der Code, den ich die Graphen zu erzeugen, verwenden.

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' 

}); 

Jede Hilfe wird sehr geschätzt.

Answer 1

Sie können ein Bild in den zentralen Knoten des Ringdiagramm einfügen - .c3-Chart-Bögen

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 See.