2016-04-30 34 views
1

是否可以使用Dc.js绘制分组条形图?是否可以使用Dc.js绘制分组条形图?

这里是我的数据样本(CSV):在

English_GPA,English_level,GPA,Total_Distance,Math_GPA,Math_level 
2.533333333,C+,3.27,53,3.825,A- 
2.85,B-,2,92,1.425,D+ 
1.766666667,C-,2.81,42,2.675,B- 
2,C,2.33,92.5,2.925,B- 
1,D,1.43,16,0.666666667,F 
2.666666667,C+,1.88,147,1.675,C- 
2.866666667,B-,3.49,42,3.175,B 
1.65,D+,2.11,67,1,D 
3.9,A-,2.31,42,1.9,C- 
1,D,2.34,32,2.9,B- 
2,C,2,49,1.675,C- 
2.3,C,1.91,37.5,2,C 
1.7,C-,2.14,7,0.85,F 
3.2,B,3.38,43,3.4,B+ 

我初学者与该库,我想计算GPA平均,然后把它放在y轴和(English_level和Math_level) X轴,那么在这个图书馆可能吗?

我试图用compositeChart与2维,但它并没有为我工作..

这里是我的尝试:

function grid (selector,data) { 
    var ndx = crossfilter(data), 
     all = ndx.groupAll(); 

    var bar_Math_level = dc.compositeChart(selector + " .Math_level"); 
    var bartry = dc.barChart(selector + " .English_level"); 
    var Math_level = ndx.dimension(function(d) { 
     if (typeof d.Math_level == "undefined") return ""; 
     return d.Math_level; 
     }); 
    var English_level = ndx.dimension(function(d) { 
     if (typeof d.English_level == "undefined") return ""; 
     return d.English_level; 
     }); 
    var Math_levelGroup1 = Math_level.group().reduce(
    function(p, v) { 
    ++p.count; 
     p.total += v.GPA; 
     if (p.count == 0) { 
      p.average = 0; 
     } else { 
      p.average = p.total/p.count; 
     }; 
     return p; 
    }, 
    function (p, v) { 

    --p.count; 
     p.total -= v.GPA; 
     if (p.count == 0) { 
      p.average = 0; 
     } else { 
      p.average = p.total/p.count; 
     }; 
     return p; 
    }, 
    function (p, v) { 
    return { 
      count: 0, 
      total: 0, 
      average: 0 
     }; 
    } 
); 

var English_levelGroup2 = English_level.group().reduce(
    function(p, v) { 

    ++p.count; 
     p.total += v.GPA; 
     if (p.count == 0) { 
      p.average = 0; 
     } else { 
      p.average = p.total/p.count; 
     }; 
     return p; 
    }, 
    function (p, v) { 

    --p.count; 
     p.total -= v.GPA; 
     if (p.count == 0) { 
      p.average = 0; 
     } else { 
      p.average = p.total/p.count; 
     }; 
     return p; 
    }, 
    function (p, v) { 
    return { 
      count: 0, 
      total: 0, 
      average: 0 
     }; 
    } 
); 



    bar_Math_level 
    .width(650) 
    .height(200) 
    .dimension(Math_level) 
    .group(Math_level.group()) 

    .compose([ 
    dc.barChart(bar_Math_level) 
     .dimension(Math_level) 
     .gap(50) 
     .group(Math_levelGroup1, 'Math', function(d) { 
     return d.value.average; 
     }) 
     .colors('red'), 
    dc.barChart(bartry) 
     .dimension(English_level) 
     .outerPadding(0) 

     .group(English_levelGroup2, 'English', function(d) { 
     return d.value.average; 
     }) 
     .outerPadding(0) 
     .gap(80) 
     .colors('blue') 
    ]) 

    .yAxisLabel('Total_GPA') 

    .x(d3.scale.ordinal()) 
    .xUnits(dc.units.ordinal) 

    .xAxisLabel('Level'); 
bar_Math_level.render(); 

dc.renderAll(); 
} 

这里什么我有: enter image description here

我想要做的其中一个: enter image description here

如果这是不可能的我使用另一个库并将其与另一个dc.js图连接起来?如何?

回答

2

有两个具有此功能的pull请求。请尝试PRS的一个或两个,并评论时您的经验:

https://github.com/dc-js/dc.js/pull/1043

https://github.com/dc-js/dc.js/pull/984

编辑:我已经建立了每个建议的PR对自己的分支机构和添加的说明下载的ZIP探头。

+0

我在初学的js和这个库.. 我下载的代码,但我不知道如何使用它 你能解释或添加关于如何使用和运行代码.. ,并感谢您的意见 –

+0

为每个PR构建分支和添加说明。请尝试他们两个! – Gordon

+0

感谢您的帮助.. –

相关问题