Dc.js：可滚动的rowChart，没有间隙？ [英] Dc.js: Scrollable rowChart with no gap?

问题描述

似乎不能同时在 rowChart <中使用 height 和 fixedBarHeight / code>。 id喜欢使用 fixedBarHeight ，因此所有条形都具有我想要的大小，并且图表位于可滚动的div中，以便条形数定义图表的高度。

解决方案

要解决此问题，请在行图div后面添加一个div，该div将包含

 < div id ='row-axis'>< / div> 
  

然后在javascript中初始化该轴

  dc.axisChart（'＃row-axis'）
 .margins（{左：10，上：0，右：10，下：10}）
 .height（50）
 .width（300）
 .dimension（维）
 .group（group）
 .elasticX（true）; 
  

然后将行图的边距更改为正确地与轴粘合。它们的宽度也必须相同。

  .width（300）
 .margins（{左：10，顶部：0，右：10，下：0}）
  

然后，在CSS中

  div.dc-chart {
 float：none; 
} 
  

不要忘记包含 overflow-y：auto 表示行样式。然后，您将得到：

但是，如果您的身高太大（或太大），则无法解决间距问题小），与 fixedBarHeight 相比。

但是现在您的边距为零，因此很容易计算出适当的高度（但是您必须通过

值得一提的是，这时您甚至不需要 fixedBarHeight 。只需使用X N +间隙（N + 1）设置 height ，就会导致dc自动将此值设置为X。

基于： https://bl.ocks.org/ialarmedalien / 0a4bf25ffc0fb96ae569a20f91957bc1

It seems like the height and fixedBarHeight cant both be used in a rowChart. Ids like to use fixedBarHeight so all the bars have the size I want, and the chart to be in a scrollable div so that the numbers of bars define the height of the chart. Is this possible?

解决方案

The dc.axis addon mentioned by @Gordon will solve the problem with the axis in a scrollable div, but not the problem asked. By default, the axis will only appear at the bottom, not before.

To solve this, add one div after the row chart div, this div will contain a copy of the axis.

<div id='row-axis'></div>

Then initialize this axis in the javascript

dc.axisChart('#row-axis')
        .margins({ left: 10, top: 0, right: 10, bottom: 10 })
        .height( 50 )
        .width( 300 )
        .dimension( dimension )
        .group( group )
        .elasticX( true );

Then change the margin of the row chart to 'glue' correctly with the axis. They also must have the same width.

    .width(300)
    .margins({ left: 10, top: 0, right: 10, bottom: 0 })

Then , in the css

div.dc-chart {
  float: none;
}

Dont forget to include overflow-y: auto for the row style. Then you get:

This however doesnt solve the gap problem if your height is too large (or too small) compared to the fixedBarHeight.

But now your margin is zero, so the proper height is easy to calculate (but you must pass the gap value, which has 5 by default). Assuming N=chart.group().all().length, then do:

.fixedBarHeight(X)
.height(X*N + gap*(N+1))

Which will give you:

Worth mentioning that at this point you dont even need the fixedBarHeight anymore. Simply setting the height using XN + gap(N+1) will result in dc auto setting this value to X.

Based on: https://bl.ocks.org/ialarmedalien/0a4bf25ffc0fb96ae569a20f91957bc1

这篇关于Dc.js：可滚动的rowChart，没有间隙？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！