c3.js

Question

का उपयोग कर कस्टम डोनट या पाई चार्ट बनाना c3.js. का उपयोग करके नीचे बनाने की कोशिश कर रहा है।

हम आवेदन में एक ही चार्टिंग पुस्तकालय का उपयोग कर रहे तो यह संगत बनाए रखना चाहते हैं। इसे प्राप्त करने के लिए या तो डोनट या पाई चार्ट को अनुकूलित करने के लिए c3.js में कोई रास्ता नहीं मिला। किसी भी मदद या पॉइंटर्स की सराहना की जाती है।

Answer 1

एचटीएमएल

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

सीएसएस

#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; 
} 

जे एस

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/

---