CanvasJS 覆盖标题栏

Question

我是 Javascript/HTML/CSS 开发新手。我使用 canvasjs 创建了图表或图形。但它覆盖了标题栏。我旁边有一个 table 滚动时不会覆盖。 picture reference here

这是我的css:

.titleBar{
    background-color: #f0f0f5;
    height: 40px;
    width: 100%;
    position: fixed;
}
.titleBar input[type=button]{
    height: 100%;
    width: 15%  ;
    outline: none;
    border: none;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.titleBar input:hover{
    background-color:#b1b1cd;
}
.titleBar input:focus{
    border-bottom-style: solid;
    border-bottom-color: #3c3c5d;
}
.upper{
    height: 250px;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%; 
    margin-top: 5%;
    
}
.barGraph{
    height: 100%;
    width: 30%;
    background-color: white;
    float: left;
}
.topLocations{
    height: 250px;
    width: 250px;
    background-color: white;
    margin-right: 5%;
    text-align: center;
    float: right;
}

.topStocks{
    height: 250px;
    width: 250px;
    background-color: white;
    margin-right: 5%;
    text-align: center;
    float: right;
}

.topAgents{
    height: 250px;
    width: 250px;
    background-color: white;
    margin-right: 5%;
    text-align: center;
    float: right;
}

在我将 chart.js 与相同的 css 一起使用之前它工作正常但是当我切换到 canvasjs 时，我遇到了这个问题。

HTML

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<link rel="stylesheet" href="index.css">
<script type="text/javascript">

$(document).ready(function(){ 
var dataPoints = [];
var chart = new CanvasJS.Chart("barGraph",{
    animationEnabled: true,
    title:{
        text:"Top Groups"
    },
    data: [{
        type: "column",
        dataPoints : dataPoints,
    }]
});
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {  
    $.each(data, function(key, value){
        dataPoints.push({x: value[0], y: parseInt(value[1])});
    }); 
    chart.render();
});
});

$(document).ready(function(){
    var dataPoints = [];
    var pieGraph = new CanvasJS.Chart("pieGraph",{
        animationEnabled: true,
        title:{
            text:"Pie Graph"
        },
        data: [{
            type: "pie",
            dataPoints : dataPoints,
        }]
    });
    $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {  
        $.each(data, function(key, value){
            dataPoints.push({x: value[0], y: parseInt(value[1])});
        }); 
        pieGraph.render();
    });
});

$(document).ready(function(){
    var dataPoints = [];
    var lineGraph = new CanvasJS.Chart("lineGraph",{
        animationEnabled: true,
        title:{
            text:"Sales Trend"
        },
        data: [{
            type: "line",
            dataPoints : dataPoints,
        }]
    });
    $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {  
        $.each(data, function(key, value){
            dataPoints.push({x: value[0], y: parseInt(value[1])});
        }); 
        lineGraph.render();
    });
});
</script>
</head>

<body>
    <script>
        $(function(){
            $("#titleBar").load("menuBar.html");
        })
    </script>
<div id="titleBar"></div>
<div class="container">
    <div class="upper">
        <div id="barGraph" class="barGraph"></div>

        <div class="topStocks">
            <table id="topStocks">
                <tr>
                    <th></th>
                    <th>TOP 5 Stocks</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>
        
        <div class="topLocations">
            <table id="topLocations">
                <tr>
                    <th></th>
                    <th>TOP 5 Locations</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>

        <div class="topAgents">
            <table id="topAgents">
                <tr>
                    <th></th>
                    <th>TOP 5 Agents</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="middle">
        <div id="lineGraph" class="lineGraph" ></div>
        <div id="pieGraph" class="pieGraph" ></div>
    </div>

    <div class="lower"> <!--Start of Lower Layer-->

        <div class="customer">
            <table id="customer">
                <tr>
                    <th></th>
                    <th>Top 10 Customers</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>

        <div class="employees">
            <table id="employees">
                <tr>
                    <th></th>
                    <th>EMPLOYEES</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>

        <div class="exchangeRate">
            <table id="exchangeRate">
                <tr>
                    <th></th>
                    <th>EXCHANGE RATE</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>

        <div class="financial">
            <table id="financial">
                <tr>
                    <th></th>
                    <th>FINANCIALS</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>

        
    </div> <!--End of Lower Layer-->

</div>
</body>
</html>

Answer 1

看来您只缺少 .titleBar 上的一点 z-index。我将 z-index: 1; 添加到您提供的 CSS 中，现在我看到了顶部的栏。我不得不猜测 .titleBar 的内容可能是什么，因为我不知道 .load("menuBar.html") 调用中的内容，但我很乐观，这将为您提供所需的内容。

.titleBar{
    background-color: #f0f0f5;
    height: 40px;
    width: 100%;
    position: fixed;
    z-index: 1; /* added this */
}
.titleBar input[type=button]{
    height: 100%;
    width: 15%  ;
    outline: none;
    border: none;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}
.titleBar input:hover{
    background-color:#b1b1cd;
}
.titleBar input:focus{
    border-bottom-style: solid;
    border-bottom-color: #3c3c5d;
}
.upper{
    height: 250px;
    width: 100%;
    padding-left: 2%;
    padding-right: 2%; 
    margin-top: 5%;
    
}
.barGraph{
    height: 100%;
    width: 30%;
    background-color: white;
    float: left;
}
.topLocations{
    height: 250px;
    width: 250px;
    background-color: white;
    margin-right: 5%;
    text-align: center;
    float: right;
}

.topStocks{
    height: 250px;
    width: 250px;
    background-color: white;
    margin-right: 5%;
    text-align: center;
    float: right;
}

.topAgents{
    height: 250px;
    width: 250px;
    background-color: white;
    margin-right: 5%;
    text-align: center;
    float: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<script>
$(document).ready(function(){ 
var dataPoints = [];
var chart = new CanvasJS.Chart("barGraph",{
    animationEnabled: true,
    title:{
        text:"Top Groups"
    },
    data: [{
        type: "column",
        dataPoints : dataPoints,
    }]
});
$.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {  
    $.each(data, function(key, value){
        dataPoints.push({x: value[0], y: parseInt(value[1])});
    }); 
    chart.render();
});
});

$(document).ready(function(){
    var dataPoints = [];
    var pieGraph = new CanvasJS.Chart("pieGraph",{
        animationEnabled: true,
        title:{
            text:"Pie Graph"
        },
        data: [{
            type: "pie",
            dataPoints : dataPoints,
        }]
    });
    $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {  
        $.each(data, function(key, value){
            dataPoints.push({x: value[0], y: parseInt(value[1])});
        }); 
        pieGraph.render();
    });
});

$(document).ready(function(){
    var dataPoints = [];
    var lineGraph = new CanvasJS.Chart("lineGraph",{
        animationEnabled: true,
        title:{
            text:"Sales Trend"
        },
        data: [{
            type: "line",
            dataPoints : dataPoints,
        }]
    });
    $.getJSON("https://canvasjs.com/services/data/datapoints.php?xstart=1&ystart=10&length=100&type=json", function(data) {  
        $.each(data, function(key, value){
            dataPoints.push({x: value[0], y: parseInt(value[1])});
        }); 
        lineGraph.render();
    });
});
</script>
<div id="titleBar">
  <div class="titleBar">
    <input type="button" value="Title bar item 1">
    <input type="button" value="Customer Information">
    <input type="button" value="Financial information">
    <input type="button" value="Presentation materials">
    <input type="button" value="Logout">
  </div>
</div>
<div class="container">
    <div class="upper">
        <div id="barGraph" class="barGraph"></div>

        <div class="topStocks">
            <table id="topStocks">
                <tr>
                    <th></th>
                    <th>TOP 5 Stocks</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>
        
        <div class="topLocations">
            <table id="topLocations">
                <tr>
                    <th></th>
                    <th>TOP 5 Locations</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>

        <div class="topAgents">
            <table id="topAgents">
                <tr>
                    <th></th>
                    <th>TOP 5 Agents</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>
    </div>

    <div class="middle">
        <div id="lineGraph" class="lineGraph" ></div>
        <div id="pieGraph" class="pieGraph" ></div>
    </div>

    <div class="lower"> <!--Start of Lower Layer-->

        <div class="customer">
            <table id="customer">
                <tr>
                    <th></th>
                    <th>Top 10 Customers</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>

        <div class="employees">
            <table id="employees">
                <tr>
                    <th></th>
                    <th>EMPLOYEES</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>

        <div class="exchangeRate">
            <table id="exchangeRate">
                <tr>
                    <th></th>
                    <th>EXCHANGE RATE</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>

        <div class="financial">
            <table id="financial">
                <tr>
                    <th></th>
                    <th>FINANCIALS</th>
                </tr>
                <tr>
                    <td>1.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>2.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>3.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>4.</td>
                    <td>Angelique Esguerra</td>
                </tr>
                <tr>
                    <td>5.</td>
                    <td>Angelique Esguerra</td>
                </tr>
            </table>
        </div>

        
    </div> <!--End of Lower Layer-->

</div>

CanvasJS 覆盖标题栏

CanvasJS overlays titlebar

css

canvasjs