Creazione di ciambella o grafico a torta personalizzato utilizzando c3.js

Question

Cercando di creare il seguito utilizzando c3.js.

Stiamo usando la stessa libreria di creazione di grafici attraverso l'applicazione in modo vorrebbe mantenerlo coerente. Non ho trovato un modo in c3.js per personalizzare la ciambella o il grafico a torta per ottenere questo. Qualsiasi aiuto o suggerimento è molto apprezzato.

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) 

---

Fiddle - http://jsfiddle.net/xpvhow5p/

---