微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

dc.js 条形图 - 通过多个数据条目的总和计算条形大小

如何解决dc.js 条形图 - 通过多个数据条目的总和计算条形大小

抱歉标题,很难用一句话概括我想要实现的目标。

我有一个使用交叉过滤器的条形图,其他 6 个图表也使用该交叉过滤器。我的数据如下(注意:这只是一个小样本,每个对象中还有更多的键)

var data = [
    { clientime : '20210603000000',calendarweek : '22',x :  9,y :  4 },{ clientime : '20210603000007',x :  5,y :  5 },{ clientime : '20210607000000',calendarweek : '23',x :  1,y :  2 },{ clientime : '20210607000007',{ clientime : '20210615000000',calendarweek : '24',x : 10,y : 20 },{ clientime : '20210615000011',];

每个条形的类别是日历周,我希望该值是所有 x 的总和除以所有 y 的总和。

根据上面的示例,我想看到 3 个条形。

Bar '22' should have the value `sum(9,5)/sum(4,5)` = 1.556
Bar '23' should have the value `sum(1,5)/sum(2,5)` = 0.857
Bar '24' should have the value `sum(10,5)/sum(20,5)` = 0.6

我的第一个意图是使用 reduce 函数,我可以在其中添加删除自定义字典中的总和。

var x_key = "calendarweek";
var dim = crossfilter.dimension( d => d[x_key] );
var grp = dim.group().reduce(
    ( p,v ) => {
        p.sum_x += v.x;
        p.sum_y += v.y;
        return p;
    },( p,v ) => {
        p.sum_x -= v.x;
        p.sum_y -= v.y;
        return p;
    },() => ( { sum_x : 0,sum_y : 0 } )
);

var chart = dc.barChart( "#chart" );
chart
    .width( 490 )
    .height( 280 )
    .dimension( dim )
    .group( grp )
    .x( d3.scaleBand() )
    .xUnits( dc.units.ordinal )
    .elasticX( true )
    .elasticY( true )
    .controlsUseVisibility( true )
    .margins( {
        top    : 10,right  : 50,bottom : 20,left   : 40,} );

grp.all() 看起来确实不错,但从现在开始我不确定如何将数据正确设置为图表。使用创建的组根本没有显示任何条,因为我在 reduce 函数中创建了一个 dc.js 不理解的对象。

Group

此外,我希望仍然能够将条形限制为 N 个条目。

解决方法

感谢 Gordon 在评论中为我指明了正确的方向,我能够使用 valueAccesor 解决我的问题。

chart_mttrhist.valueAccessor( function( d ) {
    return ( d.value.sum_x / d.value.sum_y );
} );

请注意问题中的代码略有变化。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。