javascript - 使用 c3.js 创建自定义圆环图或饼图

Question

尝试使用 c3.js 创建以下内容。

我们在整个应用程序中使用相同的图表库，因此希望保持一致。没有在 c3.js 中找到自定义 donut 或饼图的方法来获得它。非常感谢任何帮助或指点。

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/

---