复合图表的折线图中的工具提示在dc.js中不起作用

时间:2014-08-27 12:19:38

标签: dc.js crossfilter

我在dc中绘制一个复合图表,其中包含一个条形图和一个折线图。使用的代码如下。但是,条形图的工具提示很好,但线图的工具提示根本没有显示出来。我几乎没有任何可用的示例可供查看。任何帮助将不胜感激

 compositeChart.width(1200)
             .height(240)
             .margins({top: 10, right: 100, bottom: 70, left:80})
             .transitionDuration(800)
         .dimension(depValue)
         .elasticY(true)
             .filter('(All)')
             .x(d3.scale.ordinal().domain(["AUTO & TIRES","BABY","CLOTHING","ELECTRONICS","GARDEN","GROCERY","HEALTH","HOME","HOME IMPROVEMENT", "PHOTO","SPORTS", "TOYS","VIDEO GAMES"]))
             .xUnits(dc.units.ordinal)
             .renderHorizontalGridLines(true)
             .compose([
                    dc.barChart(compositeChart)
                            .width(1200)
                            .height(240)
                            .group(group,"This Year")
                            .valueAccessor(function (p) {return p.value})
                            .clickFilterBehavior("replace")
                            .title(function(d) { return d.key + ": " + d3.round(d.value,2); })
                            .barPadding(0.5)
                            .brushOn(false)
                            .elasticY(true)
                            .filter('(All)')
                            .margins({top: 10, right: 100, bottom: 70, left:80})
                            .gap(15),
                     dc.lineChart(compositeChart)
                            .width(1200)
                            .height(240)
                            .group(group1,"Last Year")
                            .valueAccessor(function (p) {return p.value})
                            .margins({top: 10, right: 100, bottom: 70, left:80})
                            .yAxisLabel($('metric').value+'(TY)')
                            .brushOn(false)
                            .title(function(d) { return d.key + ": " + d3.round(d.value,2); })
                            .elasticY(true)
                            .colors('black')
                  ])
                .yAxisLabel($('metric').value+'(TY)')
                .renderHorizontalGridLines(true)
  compositeChart.renderlet(function(chart){
  chart.selectAll("g.x text")
    .attr('transform', "rotate(30)")
    .style('text-anchor','start')
    .style('font-weight','bold');
});

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,但我设法以一种奇怪的方式解决了这个问题。在我的图表上,我有一个resetAll按钮,按下它会使线条工具提示起作用。经过几次尝试,我发现两次调用renderAll()就可以了。我不知道如何修复它,但我认为它可能是dc.js的错误。

dc.renderAll();
dc.renderAll();