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帶順序軸的條形圖

回答

相關問題