首页 文章

将百分比添加到dc.js中的饼图标签

提问于
浏览 次
4

我有一个饼图，我想为标签添加百分比 . 这是饼图的jsfiddle，代码如下 . 现在图表显示了实际值 . 我看了dc.js Getting Started and How-To Guide这是仪表板的一个例子 . 它的图表中有百分比 . 但是，当我尝试复制结构时，我收到一个错误 . 例如，当我像这样使用标签功能时

.label(function(d) {if(all.value){return d.key + " " + d.value / all.value();}
.renderLabel(true)

在控制台中，它说所有都没有定义 . 此外， d.key 也没有返回任何内容 . 我想我的数据有不同的结构 . 帮助赞赏 . 谢谢 .

HTML

<body>
    <div id='Chart'>
    </div>
</body>

JS

var ndx = crossfilter(data);

var XDimension = ndx.dimension(function (d) {
    return d.Category;
});

var YDimension = XDimension.group();

dc.pieChart("#Chart")
    .width(480).height(300)
    .dimension(XDimension)
    .group(YDimension)
    .label(function(d){return d.value});

dc.renderAll();

Data

var data = [{
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "1"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "A",
    ID: "2"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "1"
}, {
    Category: "B",
    ID: "2"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "3"
}, {
    Category: "B",
    ID: "4"
}, {
    Category: "C",
    ID: "1"
}, {
    Category: "C",
    ID: "2"
}, {
    Category: "C",
    ID: "3"
}, {
    Category: "C",
    ID: "4"
}, {
    Category: "C",
    ID: "4"
},{
    Category: "C",
    ID: "5"
}];
javascript d3.js dc.js crossfilter

3 回答

  • 9

    你很亲密！在这种情况下，我建议做类似以下的事情：

    .label(function(d) {
    console.log(JSON.stringify(d));
})

    了解数据结构 . 如果你这样做，你会看到 key 和 value 在 d.data 之下，所以你可以有一个像这样的标签

    .label(function(d) {
    return d.data.key + ' ' + d.data.value + '%';
})

    如果您只想计算显示的圆的分数，可以使用 startAngle 和 endAngle 属性 .

    .label(function(d) {
    return d.data.key + ' ' + Math.round((d.endAngle - d.startAngle) / Math.PI * 50) + '%';
});

    (d.endAngle - d.startAngle) 将显示切片显示的弧度数，因此您可以通过除以圆中的弧度数来计算其中的百分比 .

    回复于
  • 0

    实际上，它没有d.data . 相反，我使用.renderlet（）::

    .renderlet(function(chart){
        chart.selectAll('text.pie-slice').text( function(d) {
        return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
        })
    })
    回复于
  • 0

    .label 是修改饼图的正确方法有bug，按登录检查d

    .label(d => {
    console.log(d);
    // {
    //  key: 'which you return in dimension',
    //  value: 'ex: 259.91'
    // }
})

    例如，数组中有6个obj，但是日志可能只有3个或4个@@要解决这个bug

    .on('pretransition', function(chart){
    chart.selectAll('text.pie-slice').text(d => {
        console.log(d);
        // {
        //  data: {
        //      key: 'which you return in dimension',
        //      value: 'ex: 259.91'
        //  },
        //  endAngle: 'xxx',
        //  startAngle: 'yyy'
        // }
    })
})

    d obj inside text()

    通过这种方式我们可以在数组中记录足够的6个objs标签文本是 text(d => {}) 中的返回值

    chart.selectAll('text.pie-slice').text(function(d){
    let label = d.data.key;
    return label + ': ' + Number(d.data.value).toFixed(2);
})

//Or play with percentage
chart.selectAll('text.pie-slice').text(function(d){
    return d.data.key + ' ' + dc.utils.printSingleValue((d.endAngle - d.startAngle) / (2*Math.PI) * 100) + '%';
})
    回复于

相关问题