chart.js非常好，我正在创建我的第一个图表。但是我有一个我不知道的问题。创建对象之后，尽管我使用bootstrap4以文本为中心，但我的画布/图形跳到了左侧。画布在开始时也位于正确的位置。重现该问题的代码是：
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="col-sm-12">
<div id="my_graph" class="col-sm-12 text-center">Graph: <br></div>
<button id="test_button" type="button" class="btn btn-primary">test_button</button>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Bootstrap validator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<!-- chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<!-- Import custom JavaScript -->
<script src="./js.js"></script>
</body>
</html>
js是：
$(document).ready(function () {
$('#my_graph').append('<canvas id="myCanvas" width="100" height="100" style="border:1px solid #000000">');
});
$('#test_button').click(function (event) {
drawGraph();
})
function drawGraph() {
var ctx = document.getElementById('myCanvas');
myLineGraph = new Chart(ctx, {
type: 'line',
data: {
labels: [0],
datasets: [{
data: [0],
label: "nr1",
}]
},
options: {
responsive: false
}
});
}
我想念什么吗？非常感谢。
我发现了您的问题...！
在canvas初始设置为display: block时，您需要在display: inline-block; 分号后的;下更改为此style
您可以根据需要在align="center"标签上添加class="text-center"或canvas
例如：
<canvas id="myCanvas" align="center" width="100" height="100" style="border:1px solid #000000; display: inline-block;">
这是解决方案，您可以在这里检查
$(document).ready(function() {
$('#my_graph').append('<canvas id="myCanvas" align="center" width="100" height="100" style="border:1px solid #000000; display: inline-block;">');
});
$('#test_button').click(function(event) {
drawGraph();
})
function drawGraph() {
var ctx = document.getElementById('myCanvas');
myLineGraph = new Chart(ctx, {
type: 'line',
data: {
labels: [0],
datasets: [{
data: [0],
label: "nr1",
}]
},
options: {
responsive: false
}
});
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test</title>
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="col-sm-12">
<div id="my_graph" class="text-center" >Graph: <br></div>
<button id="test_button" type="button" class="btn btn-primary">test_button</button>
</div>
</div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<!-- Bootstrap validator -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/1000hz-bootstrap-validator/0.11.9/validator.min.js"></script>
<!-- chart.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<!-- Import custom JavaScript -->
<script src="./js.js"></script>
</body>
</html>