Chart.js X轴标签在悬停时复制

Question

我正在使用Chart.js 2.8版，因此不确定它是否在该版本中或是否是常见问题。 最初，我的图表加载良好，但随后页面刷新，当我将鼠标悬停在任何图表上（有4个）时，都可以看到重复项。 副本看起来像这样： ！https://postimg.cc/3db6xFTz

我不确定要尝试什么或从哪里开始寻找导致此问题的原因。我曾尝试搜索类似的案例，但似乎没有人遇到这个问题。任何建议将不胜感激。

Answer 1

好吧，我找到了问题和解决方案。 问题的根源在于刷新页面并调整图表大小时。然后，我尝试了Chart.defaults.global.maintainAspectRatio= false;命令，该命令虽然有效，但重复了X轴刻度标签。

问题：这两个命令不能一起使用。它会导致悬停重复。

Chart.defaults.global.responsive = true; 
Chart.defaults.global.maintainAspectRatio= false;

解决方案：可在chartjs.org文档中找到。 无法直接从canvas元素检测画布大小更改的时间。 Chart.js使用其父容器更新画布渲染和显示大小。但是，此方法要求容器相对放置并且仅专用于图表画布。然后，可以通过设置容器大小的相对值来获得响应性（示例）：

<div class="chart-container" style="position: relative; height:40vh; width:80vw">
    <canvas id="chart"></canvas>
</div>

请注意，为了使上面的代码正确地调整图表高度的大小，还必须将maintainAspectRatio选项设置为false。

我添加了div来包裹我的画布，更改了尺寸，这解决了我的问题：）