Question

我想在html中的两个不同的div中重叠高图和渲染器但是无法做到。我尝试了div和图表/渲染器的z-index，但没有用。我尝试按照我希望重叠的顺序画画，但是没有用。
不能使用我希望放在所有其他div之上的div的绝对位置。

我错过了什么吗？这是我的代码

<style>.style1 {
    height: 300px;    width:200px;    float:left;
    border: 1px solid red;    background-color: yellow;
    z-index:3;
}
.style2 {
    height: 200px;    width: 200px;    float:left;
    border: 1px solid black;    background-color: red;
    margin-left:-50px;
    z-index:3;
}
.style3 {
    height: 200px;    width: 200px;    float:left;
    border: 1px solid black;    background-color: orange;
    z-index:0; margin-left:-90px;
}</style>

<script src="http://code.highcharts.com/highcharts.js"></script>
<div id="container" class="style1"></div>
<div id="container2" class="style2"></div>
<div id="container3" class="style3"></div>

$(function () {
    var renderer = new Highcharts.Renderer(
    $('#container')[0],
    200,
    200);

    renderer.rect(10, 10, 100, 50, 5).attr({
        fill: 'blue',
        stroke: 'black',
            'stroke-width': 1
    }).add();

    renderer.circle(100, 100, 50).attr({
        fill: 'red',
        stroke: 'black',
            'stroke-width': 1
    }).add();


    drawChart1();
    drawChart2();
    //renderer.toFront();
});


function drawChart1() {
    c = new Highcharts.Chart({
        chart: {
            renderTo: 'container2',
            borderWidth:1,borderRadius:0,
        },
        title: {
            text: 'Chart 1'
        },

        series: [{
            data: [1, 2, 3]
        }]
    });
};

function drawChart2() {
    c = new Highcharts.Chart({
        chart: {
            renderTo: 'container3',
            borderWidth:1,borderRadius:0,
        },
        title: {
            text: 'Chart 2'
        },

        series: [{
            data: [1, 2, 3]
        }]
    });
};

我创建了fiddle here

在不同的div中重叠highcharts和渲染器

0 个答案: