DC.js复合图将折线图的点对准条形中心 [英] DC.js Composite chart Align points of Line chart in center of bars

问题描述

我正在尝试创建复合图，我的要求是绘制条形图，折线图和虚线图。为此，我绘制了一个综合图表。现在我遇到了折线图的点从条形图的起点开始的问题，但我需要从折线的中心开始。

您可以在

我从Stackoverflow得到了一些帮助，即：

解决方案

我无法解释为什么会这样，但是结合了范围带和旧式 .gap（1），我能够正确绘制它。

诀窍是

  ._rangeBandPadding（1）
  

  .gap（1）
 .centerBar（true）
  

他原来的问题。因此，这基本上是先前问题和答案的重复，但是我已在此fork中将其应用于您的JSFiddle：

http://jsfiddle.net/gordonwoodhull/nr0rgzvc/22/

另外，重要的是 not 为子条形图设置 barPadding 。因此，我们在合成中使用范围带布局，在条形图中使用经典的间隙填充，这听起来像是一个非常糟糕的主意...但是输出看起来还可以！

I am trying to create a composite chart and my requirements are to draw a bar chart, a line chart and a dotted line chart. For that I draw a composite chart. Now I am having problem that points of line chart starts from start of bar chart, but I need that to start from center of line.

You can see the problem in this JSFiddle.

I got some help from Stackoverflow that is:

Align points in centre of bars (DC.JS composite chart)

Seems like a workaround is to assign ._rangeBandPadding(1) the composite chart. Though as mentioned in the github thread that breaks the bar sizes, so adding .gap(1) and .centerBar(true) to the bar chart got everything looking nice.

but after that I got this output

[http://jsfiddle.net/nauman3128/nr0rgzvc/9/][2]

解决方案

I can't explain why this works, but with some odd combination of range bands and old-style .gap(1), I was able to get it to draw properly.

The trick is

        ._rangeBandPadding(1)

on the composite chart, and

        .gap(1)
        .centerBar(true)

on the child bar chart, pretty much as stated in the original question. So this is essentially a duplicate of the earlier question and answer, but I've applied it to your JSFiddle in this fork:

http://jsfiddle.net/gordonwoodhull/nr0rgzvc/22/

Also, it's important not to set barPadding for the child bar chart. So we are using range-band layout for the composite, and classic gap-padding for the bar chart, which sounds like a very bad idea... but the output looks okay!

这篇关于DC.js复合图将折线图的点对准条形中心的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！