Question

我试图用条形图创建一个简单的堆积图，该条形图包含30个条形图（数据通过json提供）。每个栏应有2种颜色，“白色”表示“总订单”，“粉红色”表示“免费订单”（此值总是较小）。它们需要堆叠。

这是一个Js Fiddle示例： https://jsfiddle.net/sodevrom/odsngjxm/5/

有一些问题： 1）动画（代码的最后部分）无法正常工作。请尝试对动画进行评论，并查看其外观。而且我以某种方式玩过，但无法使动画看起来不错 2）我想显示0值的小条（例如4-5像素）。因此，即使总销售额/免费销售额为0，我也要显示最小条形 3）无论悬停在哪个栏上，我都希望工具提示相同。因此，当前将鼠标移到白色条上时，会看到与在粉红色条上移过时不同的工具提示。我希望它显示相同的值，总订单和免费订单

这是动画部分，无法正确显示它们：

rect
        .attr('height', 0)
        .attr('y', height)
        .transition()
            .attr('height', function(d) {
                return y(d.y+d.y0);
            })
            .attr('y', function(d) {
                return y(d.y0) - y(d.y0 + d.y);
            })
            .delay(function(d, i) {
                return i * delay;
            })
            .duration(duration)
            .ease(easing);

这是工具提示部分，它会出现问题并显示不同颜色的不同数据：

tip.html(function (d, i) {
            return "<div class='text-center'>" +
                    "<h6 class='no-margin'>" + d.x  + "</h6>" +
                    "<span class='text-size-small'>total orders</span>" +
                    "<div class='text-size-small'>" + d.y + "</div>" +
                    "<span class='text-size-small'>free orders</span>" +
                    "<div class='text-size-small'>" + d.y0 + "</div>" +
                "</div>";
        });

有人可以帮我吗？

谢谢！

D3堆积条形图-d3.js-总订单和自由订单相同的条形图具有不同的颜色

0 个答案: