CanvasJS 覆盖标题栏

【问题标题】：CanvasJS overlays titlebarCanvasJS 覆盖标题栏
【发布时间】：2020-08-09 14:03:03
【问题描述】：

我是 Javascript/HTML/CSS 开发的新手。我使用 canvasjs 创建了一个图表或图形。但它覆盖了标题栏。我旁边有一张桌子，滚动时不会覆盖。 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;
}

在我使用具有相同 css 的 chart.js 之前，它工作正常，但是当我切换到 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>

【问题讨论】：

  • 我们也能看到一些 HTML 吗？如果没有这个，我们只能猜测 CSS 会应用于您的图片中的什么内容。

标签： css canvasjs


【解决方案1】：

看起来您所缺少的只是.titleBar 上的一点z-index。我在您提供的 CSS 中添加了 z-index: 1;，现在我看到了顶部的栏。我不得不猜测 .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>

【讨论】：

    猜你喜欢
    • 2018-08-02
    • 2011-11-18
    • 1970-01-01
    • 2019-11-16
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode