Bootstrap 4 我的画布/图形在创建对象后向左跳转

js很棒，我正在创建我的第一张图表。但我有一个问题我想不出来。创建对象后，我的画布/图形跳转到左侧，尽管我使用bootstrap4将文本居中。画布在开始时也位于正确的位置。再现问题的代码是：

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
        }
    });
}

$（文档）.ready（函数（）{
$（“#我的图”）。附加（“”）；
});
$（“#测试按钮”）。单击（函数（事件）{
绘图（）；
})
函数drawGraph（）{
var ctx=document.getElementById（'myCanvas'）；
myLineGraph=新图表（ctx{
键入：“行”，
数据：{
标签：[0]，
数据集：[{
数据：[0]，
标签：“nr1”，
}]
},
选项：{
回答：错
}
});
}

我错过什么了吗？

---

非常感谢。

我发现了你的问题

在初始时间，

canvas

设置为

display:block

，您需要更改为该

display:inline块在
之后
分号在
样式下的画布标记上

您可以根据需要在
画布上添加
align=“center”
或
class=“text center”
标记

例如：



这是您可以在此处查看的解决方案


$（文档）.ready（函数（）{
$（“#我的图”）。附加（“”）；
});
$（“#测试按钮”）。单击（函数（事件）{
绘图（）；
})
函数drawGraph（）{
var ctx=document.getElementById（'myCanvas'）；
myLineGraph=新图表（ctx{
键入：“行”，
数据：{
标签：[0]，
数据集：[{
数据：[0]，
标签：“nr1”，
}]
},
选项：{
回答：错
}
});
}

试验
图表：

测试按钮
请添加一个最小的代码示例片段（如果没有看到此错误/跳转，就无法知道原因）。如果您在
myGraph
中显示/隐藏图像，您还会得到一个“跳转”？（这个问题可能与flexbox网格有关，而不是与chart.js有关）。您好，谢谢。我编辑了这个片段来重现这个问题。还有一个问题的bootstrap4标签。非常感谢，“display:inline block”解决了这个问题。但为什么初始化后它会在正确的位置？我有第二个画布，它完全按照我的方式工作，但是没有chart.js/像myLineGraph这样的对象。
$(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 id="myCanvas" align="center" width="100" height="100" style="border:1px solid #000000; display: inline-block;">