0

我想在 html 中的两个不同 div 中重叠 highchart 和渲染器，但无法做到。
我尝试了 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]
        }]
    });
};

我在 这里创建了一个小提琴

4

0 回答 0