如何使用c3js在饼图上显示自定义标签？

Question

I want to show custom label on pie chart as shown in image by using C3.js .

I tried to change pie chart label with format: {...} function. But it doesn't work.

Here is what I tried,

var charThree = c3.generate({
    bindto: "#chartThree",
    size: {
        width: 500,
        height: 300
    },
    data: {
        colors: {
            A: 'yellow',
            B: 'red',
            C: 'green',
            D: 'orange',
            E: 'blue'
        },
        columns: [
              ['A',20],
              ['B',40],
              ['C',20],
              ['D',10],
              ['E',9]
        ],
        type: 'pie'
    },
    pie: {
        labels: {
            show: true,
            threshold: 0.1,
            format: {
               A: function (value, ratio, id) {
                   if(value=20) {
                       return "A<br/>9item<br/>20.2%";
                   }
               }
            }
        }
    }

});

I think, I need to used some of d3js code. But I'm not familiar with d3js .

I'm very appreciate for any suggestion.

Answer 1

This is a little quick and dirty but it gets the job done...

I'm saving the data as a comma separated list in the pie.label.format function, since it's not possible to display html here (to my knowledge):

  pie: {
    label: {
      threshold: 0.1,
      format: function(value, ratio, id) {
        ratio = d3.format("%")(ratio); // format ratio
        return [id, value, ratio].join(); // used to pass values to the onrender function
      }
    }
  },

And the actual formatting in onrendered :

  onrendered: function() {
    d3.selectAll(".c3-chart-arc text").each(function(v) {
      var label = d3.select(this);
      var data = label[0][0].innerHTML.split(',');

      var id = data[0];
      var value = data[1];
      var perc = data[2];

      d3.select(this).text("")
        .append("tspan")
        .text(id)
        .attr("dy", 0)
        .attr("x", 0)
        .attr("text-anchor", "middle").append("tspan")
        .text(parseInt(value) / 4 + " item")
        .attr("dy", "1.2em")
        .attr("x", 0)
        .attr("text-anchor", "middle")
        .append("tspan")
        .text(perc)
        .attr("dy", "1.2em")
        .attr("x", 0)
        .attr("text-anchor", "middle");
    });
  }
});

 var chart = c3.generate({ bindto: "#chart", size: { width: 500, height: 300 }, data: { colors: { A: 'yellow', B: 'red', C: 'green', D: 'orange', E: 'blue' }, columns: [ ['A', 20], ['B', 40], ['C', 20], ['D', 10], ['E', 10] ], type: 'pie' }, pie: { label: { threshold: 0.1, format: function(value, ratio, id) { ratio = d3.format("%")(ratio); // format ratio return [id, value, ratio].join(); // used to pass values to the onrender function } } }, onrendered: function() { d3.selectAll(".c3-chart-arc text").each(function(v) { var label = d3.select(this); var data = label[0][0].innerHTML.split(','); var id = data[0]; var value = data[1]; var perc = data[2]; d3.select(this).text("") .append("tspan") .text(id) .attr("dy", 0) .attr("x", 0) .attr("text-anchor", "middle").append("tspan") .text(parseInt(value) / 4 + " item") .attr("dy", "1.2em") .attr("x", 0) .attr("text-anchor", "middle") .append("tspan") .text(perc) .attr("dy", "1.2em") .attr("x", 0) .attr("text-anchor", "middle"); }); } }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.12/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css"/> <div id="chart"></div>