dc.js带顺序轴的条形图

我正在制作一个简单的条形图，以获得一年中的收入总和。下面是构建使用dc.jsdc.js带顺序轴的条形图

//INITIALIZE CROSSFILTER AND RELATED DIMENSIONS/AGGREGATES 
var data = crossfilter([ 
    {revenue: 1487946,year: 2016}, 
    {revenue: 2612,year: 2016}, 
    {revenue: 2908,year: 2015}, 
    {revenue: 1648171,year: 2015 }]); 

var dimension = data.dimension(function(d) {return d.year;}); 
var group = dimension.group().reduceSum(function(d) {return d.revenue;}); 

// MAKE A DC BAR CHART 
dc.barChart("#bar-chart") 
    .dimension(dimension) 
    .group(group) 
    .x(d3.scale.ordinal().domain(dimension)) // Need the empty val to offset the first value 
    .xUnits(dc.units.ordinal) // Tell Dc.js that we're using an ordinal x axis 
    .brushOn(false) 
    .centerBar(false) 
    .gap(70); 

console.log(dc.version); 
dc.renderAll();

它必须要指出的是，今年呈现为依次为简单的条形图的片段。

随着dc.js版本 - 1.7.5，输出不清楚：

。

随着dc.js版本 - 2.X（测试版）的输出就好多了：

它不可能使用目前因其他冲突dc.js 2.X。有关使用dc.js 1.7.5更好地制作条形图的任何想法？

这里是JS Fiddle玩耍！提前致谢。在下面的scriplet

来源

2016-02-12 Sethu Sabarish

添加的注释：

dc.barChart("#bar-chart") 
    .width(300) //give it a width 
    .margins({top: 10, right: 10, bottom: 20, left: 100})//give it margin left of 100 so that the y axis ticks dont cut off 
    .dimension(dimension) 
    .group(group) 
    .x(d3.scale.ordinal().domain(dimension)) // Need the empty val to offset the first value 
    .xUnits(dc.units.ordinal) // Tell Dc.js that we're using an ordinal x axis 
    .brushOn(false) 
    .centerBar(false) 
    .gap(7);//give it a gap of 7 instead of 70

工作代码here

来源

2016-02-12 09:17:45 Cyril

谢谢！我也是这么认为的。但是X轴在这个方面是不是有点偏移？无论如何，我们可以解决它吗？ –

我认为这是'xUnits（dc.units.ordinal）' – Cyril

的基本行为但是我们在这里看不到一个小故障吗？它不应该抵消。当我使用dc.js 2.x进行尝试时，它没有抵消。你也可以试试！这就是为什么，我希望有一些解决方法。 –

临时答案：避免序轴

这可能是一个可能的故障使用dc.js 1.7。 5。就目前而言，我能够通过将年度的作为线性标度并适当地处理蜱来绘制图表。

让我们打开这个问题，以防有人找到更好的答案！

来源

2016-02-13 09:00:46

dc.js带顺序轴的条形图

回答

相关问题