d3.js - 我如何自定义 c3.js 图表以获得这样的效果

Question

尝试使用 c3.js 创建上述内容。
我们在整个应用程序中使用相同的图表库，因此希望保持一致。在 c3.js 中没有找到自定义 donut 或饼图的方法来获得这个。我需要它是小时，而不是百分比。并且目标值应该是 12 而不是 100%。非常感谢任何帮助或指示。
正常 jsfiddle自定义链接。

var chart = c3.generate({
 bindto: '#pie-chart',
data: {
    columns: [
        ['data1', 30],
        ['data2', 120],
    ],
    type : 'donut',
    onclick: function (d, i) { console.log("onclick", d, i); },
    onmouseover: function (d, i) { console.log("onmouseover", d, i); },
    onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
donut: {
    title: "Iris Petal Width"
}
});

setTimeout(function () {
chart.load({
    columns: [
        ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
        ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],

    ]
});
}, 1500);

setTimeout(function () {
chart.unload({
    ids: 'data1'
});
chart.unload({
    ids: 'data2'
});
}, 2500);

Answer 1

我想我很接近你想要的。 onrendered回调代码是在中间附加一个圆圈；你可能想用另一种方式来处理，我的实现是非常基本的。

需要注意的关键是gauge下的配置选项:

    gauge: {
      fullCircle: true, // This makes it go all the way around
      max: 12, // This is your max unit -- 12h
      min: 0, // Min. is 0
      startingAngle: 90, // This sets the opening to the other side
      width: 25, // This is how thick the outer arc is.
      label: {
        format: function(value, ratio) {
          return value + 'HR';
        }
      }

var chart = c3.generate({
    data: {
        columns: [
            ['data1', 10],
        ],
        type: 'gauge',
        colors: {
        	data1: '#9873FF'
        }
    },
    gauge: {
      fullCircle: true, // This makes it go all the way around
      max: 12, // This is your max unit -- 12h
      min: 0, // Min. is 0
      startingAngle: 90, // This sets the opening to the other side
      width: 25, // This is how thick the outer arc is
      label: {
        format: function(value, ratio) {
		  return value + 'HR';
        }
      }
    },
    onrendered: function() {
      setTimeout(function(){ // timeout is needed for initial render.
        var centerBBox = d3.select('.c3-arc-data1').node().getBBox();

        d3.select('.c3-arcs-data1')
        .insert('circle', '.c3-arc-data1')
        .classed('c3-arc-data1-background', true)
        .attr('cx', centerBBox.x + centerBBox.width/2)
        .attr('cy', centerBBox.y + centerBBox.height/2)
        .attr('fill', '#6C40E8')
        .attr('r', (centerBBox.height / 2 - 25)) // "25" is an arbitrary number
      }, 0);
    }
});

.c3-chart-arcs-gauge-max, 
.c3-chart-arcs-gauge-min,
.c3-chart-arcs-background{
  display: none;
  }

.c3-gauge-value {
  fill: white !important;
  font-family: "Lucida Console", Helvetica, sans-serif;
  font-size: 40px !important;
  transform: translateY(10px);
}

.c3-arc-data1 {
  stroke: transparent !important;
}

<link href="https://cdn.rawgit.com/c3js/c3/0.4.11/c3.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/c3js/c3/0.4.11/c3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

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