首页 文章

DC.JS复合图表不显示最后一个值

提问于
浏览 次
1

我有一个复合条形图/折线图，所有这些都正确显示，但最终条形除外 . 数据包含8个日期和两组值的维度，一个用于teh bar，另一个用于折线图 . 我已经检查了dimesnions和groups的内容，并且都是正确的 .

图表上的第8个svg存在，但条形图不显示，请参见附图 . SVG Inspector显示一个rect定义了高度和宽度，但图表上没有显示相应的条 .
SVG Inspector shows a rect is defined with height and width though a corresponding bar is not displayed on the chart

我玩过.centerBar和.elasticX，.xAxisPadding并没有成功 . 我也尝试过更改图表尺寸和边距 .

用于显示图表的代码：

var firstWeek = d3.min(data, function (d) { return d.Week; });
var lastWeek = d3.max(data, function (d) { return d.Week; });

        var compositeKPIChart = dc.compositeChart("#W-chart");

        var KPIbChart = dc.barChart(compositeKPIChart);

        var KPIlChart = dc.lineChart(compositeKPIChart);

        compositeKPIChart.width(width)
                .height(0.9*width/2)
                .margins({ top: 10, right: 50, bottom: 30, left: 30 })
                .dimension(weekDim)
                .x(d3.time.scale().domain([firstWeek, lastWeek]))
                .xUnits(d3.time.mondays)
                .y(d3.scale.linear().domain([0, 100]))
                .compose([
                    dc.barChart(compositeKPIChart).group(barGroup, "%"),
                    dc.lineChart(compositeKPIChart).group(lineGroup, "Standard")
                ])
                .brushOn(false)
                .xAxis().ticks(d3.time.mondays).tickFormat(d3.time.format("%d %b"));
javascript d3.js charts dc.js

1 回答

  • 1

    如果元素存在但未显示，我要检查的第一件事是剪切矩形 . 您可以在调试器中删除它（或重命名链接以便引用被破坏）以查看丢失的栏 .

    但这并不能解释为什么它首先缺失 . 可能是你的X域太小了 . 请注意，条形图左对齐 - 与相应的刻度线对齐（而线条上的点显然没有宽度），因此您可能需要在域的顶部添加一周以显示条形图 .

    除少数情况外，dc.js倾向于从字面上理解域名 .

    我很惊讶 centerBar 没有帮助，如果是这样的话 .

    回复于

相关问题