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

Question

我想使用 C3.js 在饼图上显示自定义标签，如图所示。

我尝试用 format: {...} 函数更改饼图标签。但是没用。

这是我试过的，

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

});

我想，我需要使用一些 d3js 代码。但是我不熟悉 d3js.

非常感谢任何建议。

Answer 1

这有点 quick and dirty 但它完成了工作...

我将数据保存为 pie.label.format 函数中的逗号分隔列表，因为无法在此处显示 html（据我所知）：

  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 中的实际格式：

  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>

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

How to show custom label on pie chart using c3js?

javascript

c3.js