使用c3.js創建自定義甜甜圈或餅圖

Question

嘗試使用c3.js創建下面的內容。

我們使用跨應用程序相同的圖表庫所以想保持一致。在c3.js中找不到方法來自定義甜甜圈或餅圖來獲取它。任何幫助或指針，不勝感激。

Answer 1

HTML

<div id="chart"></div> 

CSS

#chart { 
    width: 150px; 
    height: 150px;  
} 

/* don't do anything fancy when hovering */ 
#chart .c3-defocused.c3-target { 
    opacity: 1 !important; 
} 

#chart text { 
    fill: #ccc; 
} 

#chart .c3-chart-arcs-title { 
    fill: white; 
    font-size: 3em; 
} 

JS

var percentage = 0.79; 

var chart = c3.generate({ 
    data: { 
     columns: [ 
      ['show', percentage], 
      ['dontshow', 1 - percentage], 
     ], 
     type: 'donut', 
     order: null 
    }, 
    color: { 
     pattern: ['#13BDD1', '#FFF'] 
    }, 
    legend: { 
     show: false 
    }, 
    donut: { 
     label: { 
      show: false 
     }, 
     title: Math.round(percentage * 100), 
     width: 15, 
     expand: false 
    }, 
    tooltip: { 
     show: false 
    } 
}); 

// baseline text properly 
d3 
    .select(".c3-chart-arcs-title") 
    .attr("dy", "0.3em") 

// add percentage symbol 
d3.select(".c3-chart-arcs") 
    .append("text") 
    .text("%") 
    .attr("dy", "-0.5em") 
    .attr("dx", "2em") 

// black background for center text 
d3.select(".c3-chart") 
    .insert("circle", ":first-child") 
    .attr("cx", chart.internal.width/2) 
    .attr("cy", chart.internal.height/2 - chart.internal.margin.top) 
    .attr("r", chart.internal.innerRadius) 

---

小提琴 - http://jsfiddle.net/xpvhow5p/

---