7
A
回答
17
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/
相关问题
- 1. 如何使用c3.js自定义甜甜圈厚度?
- 2. TeeChart - 馅饼或甜甜圈标记甜甜圈的饼图
- 3. C3.js甜甜圈图,成长段
- 4. 饼图(甜甜圈)图表
- 5. 如何使用amcharts创建多环甜甜圈饼图?
- 6. jqplot动画饼图和甜甜圈图
- 7. Chartjs套餐饼图/甜甜圈图表
- 8. 不要在C3.js上显示动画甜甜圈图表
- 9. c3.js中的堆叠甜甜圈图表
- 10. D3甜甜圈图JS JS Sankey图
- 11. charts.js分层甜甜圈饼图
- 12. SVG:饼图中的甜甜圈洞
- 13. Highcharts派甜甜圈自定义形状
- 14. 如何创建使用角JS的甜甜圈高图使用角JS的
- 15. 用于半甜甜圈或半饼图的工具提示
- 16. 甜甜圈饼图 - 添加标题 - NVd3.js
- 17. c3.js甜甜圈图:使分隔线在100%的弧上可见?
- 18. 使用JSON和chart.js创建甜甜圈图表
- 19. 甜甜圈图仅使用SVG标记
- 20. Chartjs- 2甜甜圈图表自定义工具提示
- 21. Telerik甜甜圈图表 - 自定义标签
- 22. 如何在highchart中创建这样的饼图/甜甜圈图表?
- 23. 编辑甜甜圈高图
- 24. Android的achartengine甜甜圈图
- 25. 如何使用d3.js创建甜甜圈图表中的数据标签
- 26. MVC System.Web.Helpers甜甜圈图标签定位
- 27. 绑定莫里斯甜甜圈图表
- 28. GWT Highcharts - 半圈甜甜圈
- 29. SVG圈 - 动画片段? (甜甜圈图)
- 30. ggplot2饼图和甜甜圈图在同一个地块