C3.js

Question

私は、グラフの中央に画像SITを持っている必要がありC3.js

で作られた私のチャートに画像を追加しようとしている、と私はこれらのグラフの6を持っていると画像を追加します1ページに

代わりにトランスポートのテキストをイメージに置き換えたいとします。

グラフを生成するために使用しているコードは次のとおりです。

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チャート弧を

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

を参照してください。