html - 图表JS中心文本导致死循环

Question

我试过了

<div class="col-2 text-center">
    <canvas id="htmlChart"></canvas>
    <div class="chart-inner"><h5>34</h5></div>
</div>
<div class="col-2 text-center">
    <canvas id="cssChart"></canvas>
    <div class="chart-inner"><h5>34</h5></div>
</div>
<div class="col-2 text-center">
    <canvas id="jsChart"></canvas>
    <div class="chart-inner"><h5>34</h5></div>
</div>
<div class="col-2 text-center">
    <canvas id="jqueryChart"></canvas>
    <div class="chart-inner"><h5>34</h5></div>
</div>
<div class="col-2 text-center">
    <canvas id="reactChart"></canvas>
    <div class="chart-inner"><h5>34</h5></div>
</div>
<div class="col-2 text-center">
    <canvas id="nodeChart"></canvas>
    <div class="chart-inner"><h5>34</h5></div>
</div>

使用这些 CSS

<style type="text/css">
    .chart-inner {
        margin-top: -100px;
        margin-bottom: 100px;
    }
    .chart-inner h5 {
        margin-bottom: 5px;
        margin-top: 27px;
        font-size: 20px;
        color: red;
    }
</style>

我一直在无限循环

https://tmcabe.herokuapp.com/

我期待得到

有什么提示吗？

Answer 1

首先，我从来没有使用过 chart.js，所以如果我犯了错误，请不要责怪我，现在已经快凌晨 5 点了，所以我有点头晕明确请求修复它。

现在这个问题似乎与 chart.js 处理响应的方式有关，因为您有 responsive: true 阅读此内容

响应选项:

Resizes the chart canvas when its container does (important note...).

重要提示

Detecting when the canvas size changes can not be done directly from the canvas element. Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size example

---

由此我们了解到，我们需要一个专门用于 Canvas 的相对定位元素，我们还需要为该父级设置高度和宽度(这些值将被视为起点和最大高度/宽度对于 Canvas )

是什么导致了循环？

所以我们知道 Canvas 需要它自己的相对定位的父元素和设置的高度/宽度。

<div class="col-2 text-center">
    <canvas id="nodeChart"></canvas>
    <div class="chart-inner"><h5>34</h5></div>
</div>

这就是你的代码，感谢 Bootstrap 的类 col-2 我们在 Canvas 的父级上有一个相对位置，如果父级不在 Canvas 和 chart-inner

为什么？

我只是猜测我没有深入研究源代码

chart.js 使用 Canvas 尺寸的掩码，这是一个绝对定位的 iframe 将它放在 Canvas 旁边使其填充父级，现在 iframe 将匹配父维度(父子关系与相对位置和绝对位置)，然后它将 iframe 的高度复制到 Canvas ，现在 Canvas 匹配父高度，即 Canvas 的原始高度 + div.chart-inner 这意味着 iframe 始终大于 Canvas ，并且由于父级已调整大小，因此整个过程将继续发生。

**注意:* 我注意到 Canvas 上的边框也可能导致循环，可以用 box-sizing: border-box;

修复

demo重现问题

---

解决方案

很简单，你所要做的就是给 Canvas 它自己的父级

1. 重新思考你的结构
2. 用一个空的 div 包裹 Canvas
3. 使 div.chart-inner 绝对化，这有助于将文本居中 demo

我不能推荐一种方式优于另一种方式，因为我之前从未使用过chart.js

此外，我无法对文本居中做任何事情，因为修复循环需要更改整个结构，并且因为您提供的网站很慢，所以我无法复制样式，但是

如果有什么不清楚的，请不要犹豫