解决方案:C3 - 标签未显示在C3饼图中的白色窄弧

时间:2017-10-13 10:52:35

标签: javascript d3.js charts pie-chart c3.js

我正在使用C3库创建一个饼图,并使用D3来自定义C3不会提供的一些属性。
我在外面的饼图中移动C3在圆弧内创建的标签,但是当圆弧变窄时,标签不会出现。
我认为是禁用标签的内部选项,因为在正常情况下,它不适合。即使标签不合适,我怎么能再次“激活”标签呢? 这是我创建图表的代码:

function pie(d1, d2, d3, d4, d5) {
 var id = '"#C"'
 var chart = c3.generate({
  bindto: '#C',
  size: {
   width: 1275,//550,
   height: 834//350
  },
  data: {
    columns: [
     d1,
     d2,
     d3,
     d4,
     d5
    ]
  },
  type: 'pie'
 }, 
 pie: {
 label: {
 format: function(value, ratio, id)
 {
   return d3.format('')(value)
 },
 show: true,
 threshold: -1

 }
 },
 legend: {
   show: false
  }
});

使用d3.js

将代码移到图表外部的代码
var pie-labels= d3.selectAll(".c3-chart-arc > text").each(function(v) {
  var label = d3.select(this);
  var pos = label.attr("transform").match(/-?\d+(\.\d+)?/g);
  var h = (pos[0]*pos[0]+pos[1]*pos[1]);
  // pos[0] is x, pos[1] is y. Do some position changes and update value
  //135000 is the radio of the chart
  label.attr("transform", "translate("+ (pos[0]/h*135000) +","+ (pos[1]/h*135000) +")");

当数据具有相似的值并且弧相似时,没有问题,但在处理不相等的数据时会出现问题。

1 个答案:

答案 0 :(得分:3)

如果切片未达到某个阈值,则不会绘制饼图切片标签,但执行此操作的功能可以更改为:

oninit: function () {
    this.meetsArcLabelThreshold = function () { return true; };
}

请参阅:http://jsfiddle.net/2hsr20hm/