我有一个条形图,但每一列都重叠,如下图所示:
但是当我在 jsfiddle 中创建 fiddle 时使用复制和粘贴代码,图表不会重叠。在我的原始页面中,我只有来自 twitter bootstrap 的样式。即使我删除了页面中的任何样式,我在条形图中也有重叠列。 这是我的代码:
var parseDate = d3.time.format("%Y/%m/%d").parse;
var myData = [{
seller: 'Ehtemam',
sdate: '2014/10/09',
unitprice: 10,
quantity: 100
}, {
seller: 'Jafari',
sdate: '2014/10/09',
unitprice: 100,
quantity: 106
}, {
seller: 'Jamali',
sdate: '2014/09/09',
unitprice: 105,
quantity: 109
}, {
seller: 'Asghari',
sdate: '2014/08/09',
unitprice: 110,
quantity: 106
}, {
seller: 'Rezaee',
sdate: '2014/10/09',
unitprice: 150,
quantity: 107
}, {
seller: 'Akrami',
sdate: '2014/08/09',
unitprice: 1,
quantity: 190
}, {
seller: 'Ehtemam',
sdate: '2013/07/09',
unitprice: 1,
quantity: 180
}, {
seller: 'Ehtemam',
sdate: '2014/06/09',
unitprice: 12,
quantity: 190
}, {
seller: 'Akrami',
sdate: '2014/11/09',
unitprice: 12,
quantity: 150
}, {
seller: 'Ehtemam',
sdate: '2014/12/09',
unitprice: 14,
quantity: 140
}, {
seller: 'Jafari',
sdate: '2013/12/09',
unitprice: 56,
quantity: 130
}, {
seller: 'Asghari',
sdate: '2014/12/09',
unitprice: 33,
quantity: 120
}, {
seller: 'Ehtemam',
sdate: '2012/11/09',
unitprice: 188,
quantity: 10
}, {
seller: 'Rezaee',
sdate: '2014/10/09',
unitprice: 100,
quantity: 10
}, ];
myData.forEach(function (d) {
d.sdate = parseDate(d.sdate);
d.year = d.sdate.getFullYear();
});
var data = crossfilter(myData);
var sellers = [];
for (var d in myData) {
if (sellers.indexOf(myData[d].seller) == -1) {
sellers.push(myData[d].seller);
}
}
var colorScale = d3.scale.ordinal().range(['#DB0A5B', '#F62459', '#F1A9A0', '#2C3E50', '#26A65B', '#E87E04', '#D35400']);
var sellerDimension = data.dimension(function (d) {
return d.seller;
});
var sellerGroup = sellerDimension.group().reduceSum(function (d) {
return d.quantity;
});
var sellerChart = dc.barChart('#chart');
sellerChart.height(300)
.width(600)
.dimension(sellerDimension)
.group(sellerGroup)
.x(d3.scale.ordinal().domain(sellers))
.xUnits(dc.units.ordinal)
.xAxisLabel('Sellers')
.yAxisLabel('Quantity')
.xAxis().ticks(3);
sellerChart.title(function (d) {
return d.key + ' : ' + d.value;
});
dc.renderAll();
最佳答案
您引用的 jsfiddle 使用的是 1.71 版。我敢打赌,您的真实代码使用的是 2.x 版本。
我在 http://jsfiddle.net/djmartin_umich/6zrMc/ 确认 v2.x 有这个问题.
chart.height(300)
.width(800)
.dimension(countryDimension)
.group(countryGroup)
.x(d3.scale.ordinal().domain(countries))
.xUnits(dc.units.ordinal)
.xAxisLabel("MMbbl = one million barrels")
.yAxisLabel("Reserves (MMbbl)")
.elasticY(true)
.xAxis().ticks(0);
此问题在 https://github.com/dc-js/dc.js/issues/533 中进行了详细讨论。 , 但问题尚未解决。我已将此 stackoverflow 讨论作为问题评论引用。
更新:此问题现已在最新的 DC.js 版本中修复。上面的 JSfiddle 使用最新的,所以它显示了修复。干得好戈登
关于javascript - DC 条形图中的条形重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24848550/