NVD3堆叠的条形图加上折线 [英] NVD3 Stacked Bar Chart Plus Line Overlapped

问题描述

我正在使用NVD3的MultiChart创建堆叠的条形图和折线.我对 multiChart 模型进行了一些修改，以使条形变得堆叠起来.现在的问题是，线条位于条形图的后面，因此我无法将鼠标悬停在线条上以查看线条的工具提示. NVD3中是否有任何选项可以将线路显示在最前面?

I'm using NVD3's MultiChart to create a stacked bar chart plus line. I modified the multiChart models a bit to make the bars become stacked. Now the problem is that the lines are at the back of the bars such that I cannot hover over the lines to see the tooltip for line. Is there any options in NVD3 to bring the lines to front?

我在这里创建了JSFiddle: http://jsfiddle.net/n2hfN/50/

I created the JSFiddle here: http://jsfiddle.net/n2hfN/50/

JavaScript 来源:

var margin = {
    top: 50,
    right: 50,
    bottom: 120,
    left: 70
};
var svg = "#chart svg";

var normalisedData = [{
    "key": "Group A",
        "type": "bar",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 6
    }, {
        "x": 1,
        "y": 5
    }, {
        "x": 2,
        "y": 3
    }, {
        "x": 3,
        "y": 6
    }, {
        "x": 4,
        "y": 9
    }, {
        "x": 5,
        "y": 10
    }]
}, {
    "key": "Group B",
        "type": "bar",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 5
    }, {
        "x": 1,
        "y": 7
    }, {
        "x": 2,
        "y": 5
    }, {
        "x": 3,
        "y": 3
    }, {
        "x": 4,
        "y": 9
    }, {
        "x": 5,
        "y": 8
    }]
}, {
    "key": "Group A Benchmark",
        "type": "line",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 0
    }, {
        "x": 1,
        "y": 1
    }, {
        "x": 2,
        "y": 0
    }, {
        "x": 3,
        "y": 3
    }, {
        "x": 4,
        "y": 0
    }, {
        "x": 5,
        "y": 1
    }]
}, {
    "key": "Group B Benchmark",
        "type": "line",
        "yAxis": 1,
        "values": [{
        "x": 0,
        "y": 1
    }, {
        "x": 1,
        "y": 2
    }, {
        "x": 2,
        "y": 1
    }, {
        "x": 3,
        "y": 1
    }, {
        "x": 4,
        "y": 2
    }, {
        "x": 5,
        "y": 0
    }]
}];

var axisKeys = ["2014-Jan", "2014-Feb", "2014-Mar", "2014-Apr", "2014-May", "2014-Jun"];

nv.addGraph(function () {
    var chart = nv.models.multiChart()
        .options({
        reduceXTicks: false
    })
        .margin(margin)
        .color(d3.scale.category10().range());

    chart.xAxis.tickFormat(function (d) {
        // If there is such element, return it
        if (typeof axisKeys[d] !== "undefined") {
            return axisKeys[d];
        }
        return "";
    });

    // Get normalised data for chart
    var seriesData = normalisedData;

    chart.yDomain1([0, 20]);

    // Set chart
    d3.select(svg)
        .datum(seriesData)
        .call(chart);

    // Auto resize chart on window resize
    nv.utils.windowResize(chart.update);

    return chart;
});

HTML 来源:

<div id="chart">
    <svg></svg>
</div>

提前谢谢！

推荐答案

在堆叠的条形图之后的线条上绘制线

Draw the lines after the after the stacked bars

gEnter.append('g').attr('class', 'bars1Wrap');
gEnter.append('g').attr('class', 'bars2Wrap');
gEnter.append('g').attr('class', 'stack1Wrap');
gEnter.append('g').attr('class', 'stack2Wrap');

gEnter.append('g').attr('class', 'lines1Wrap');
gEnter.append('g').attr('class', 'lines2Wrap');

希望有帮助

这篇关于NVD3堆叠的条形图加上折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！