如何以横向格式增加传说之间的差距?

时间:2016-11-03 09:14:43

标签: javascript html charts

我创建了一个图表,其中的图例重叠。我尝试增加gap()的值。 但它只适用于传说处于垂直模式的情况。 我在图表中使用了以下代码。请帮我在这里移动传说,这样他们就不会重叠。 currentanalysis 是图表的名称。

currentanalysis


.width(280)  
.height(190)  
.dimension(currentanalysisdimension)
.group(Incoming2)
.group(Outgoing2)
.elasticY(true)
.yAxisPadding(1)
.x(d3.scale.ordinal().domain(["2","3","4","5"]))
.xUnits(dc.units.ordinal)
.legend(dc.legend().x(0).horizontal(true).y(170).itemHeight(20).gap(0))
.compose([
     dc.lineChart(currentanalysis)
          .dimension(currentanalysisdimension)
          .colors('blue')
          .group(Incoming2, "Incoming/Download")
          .dashStyle([10,0])
          .renderDataPoints({radius: 4, fillOpacity: 0.8, strokeOpacity: 0.8}),

     dc.lineChart(currentanalysis)
          .dimension(currentanalysisdimension)
          .colors('orange')
          .group(Outgoing2, "Outgoing/Upload")
          .dashStyle([10,0])
          .renderDataPoints({radius: 4, fillOpacity: 0.8, strokeOpacity: 0.8}),

        ])


    .renderlet(function (chart) {
                    chart.selectAll("g._3").attr("transform", "translate(" + 15 + ", 0)");
                    chart.selectAll("g._2").attr("transform", "translate(" + 15 + ", 0)");
                })
 .render()
 });

我得到的结果为:

enter image description here

1 个答案:

答案 0 :(得分:1)

使用以下代码。这将有效。

.legend(dc.legend() .x(10).y(195).itemWidth(120).horizontal(true))