解决:C3 - 标签未显示在带有窄弧的 C3 饼图中
SOLVE: C3 - Labels not showing in C3 pie chart whit narrow arcs
我正在使用 C3 库创建饼图并使用 D3 自定义一些 C3 不允许的属性。
我正在将 C3 在圆弧内创建的标签移动到外面的饼图中,但是当圆弧变窄时,标签不会出现。
我认为是禁用标签的内部选项,因为在正常情况下,它不适合。我怎样才能 'activate' 再次使用标签,即使它不合适?
这是我创建图表的代码:
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) +")");
当数据具有相似的值并且弧相似时,没有问题,但在处理不相等的数据时会出现。
如果切片没有达到某个阈值,则不会绘制饼图切片标签,但是可以这样更改执行此操作的函数:
oninit: function () {
this.meetsArcLabelThreshold = function () { return true; };
}
我正在使用 C3 库创建饼图并使用 D3 自定义一些 C3 不允许的属性。
我正在将 C3 在圆弧内创建的标签移动到外面的饼图中,但是当圆弧变窄时,标签不会出现。
我认为是禁用标签的内部选项,因为在正常情况下,它不适合。我怎样才能 'activate' 再次使用标签,即使它不合适?
这是我创建图表的代码:
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) +")");
当数据具有相似的值并且弧相似时,没有问题,但在处理不相等的数据时会出现。
如果切片没有达到某个阈值,则不会绘制饼图切片标签,但是可以这样更改执行此操作的函数:
oninit: function () {
this.meetsArcLabelThreshold = function () { return true; };
}