我如何自定义c3.js图表​​以使其像这样

Question

尝试使用c3.js创建以上内容。我们在整个应用程序中使用相同的图表库，因此希望保持一致。在c3.js中找不到自定义甜甜圈或饼形图的方法。我需要是小时，而不是百分比。目标值也应该是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';
        }
      }

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