Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/383.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 带顺序轴的dc.js条形图_Javascript_D3.js_Dc.js - Fatal编程技术网

Javascript 带顺序轴的dc.js条形图

Javascript 带顺序轴的dc.js条形图,javascript,d3.js,dc.js,Javascript,D3.js,Dc.js,我正在制作一个简单的条形图,以获得一年的总收入。下面是使用dc.js构建条形图的片段 //INITIALIZE CROSSFILTER AND RELATED DIMENSIONS/AGGREGATES var data = crossfilter([ {revenue: 1487946,year: 2016}, {revenue: 2612,year: 2016}, {revenue: 2908,year: 2015}, {revenue: 1648171,y

我正在制作一个简单的条形图,以获得一年的总收入。下面是使用dc.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(beta版),输出会更好:

由于其他冲突,目前无法使用dc.js 2.x。关于使用dc.js 1.7.5改进条形图有什么想法吗


这是玩的好地方!提前感谢。

在下面的纸条中添加了评论:

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

工作代码

在下面的涂鸦中添加了注释:

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

工作代码

临时答案:避免顺序轴

使用dc.js 1.7.5可能会出现问题。就目前而言,我能够通过将年处理为线性刻度并适当处理刻度来绘制图表。


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

临时答案:避免顺序轴

使用dc.js 1.7.5可能会出现问题。就目前而言,我能够通过将年处理为线性刻度并适当处理刻度来绘制图表。


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

谢谢!我也知道。。但是X轴在这里不是有点偏移吗?我们能解决它吗?我认为这是xUnits(dc.units.ordinal)的基本行为,但是我们不是看到了一个小故障吗?它不应该抵消。当我尝试使用dc.js2.x时,它没有偏移。你也可以试试!这就是为什么,我希望有一些解决办法。谢谢!我也知道。。但是X轴在这里不是有点偏移吗?我们能解决它吗?我认为这是xUnits(dc.units.ordinal)的基本行为,但是我们不是看到了一个小故障吗?它不应该抵消。当我尝试使用dc.js2.x时,它没有偏移。你也可以试试!这就是为什么,我希望有一些解决办法。