在Chartjs上垂直滚动的粘滞X轴,在我的Y轴上也有一个奇怪的视觉错误

sshcrbum 于 2022-11-06 发布在 Chart.js

关注(0)|答案(1)|浏览(143)

一天两个Chartjs帖子！？抱歉。
有没有办法添加垂直滚动，但与您的X轴卡住？这里的想法是，如果我有8个或更多的酒吧（或取决于高度）在我的堆叠条形图，我可以滚动通过所有他们。
这是一个来自设计的图像：

现在，为了让我的应用程序能够快速响应，我在这里添加了responsive: true行，这不是处理这类事情的最佳方法，因为它实际上会使图表不再呈现。那么，我是否需要在这里添加一个硬编码的高度和宽度才能正常工作呢？这就是我的想法，所以我添加了一个硬编码的宽度，它只显示两个数据集，第一个和最后一个。
有没有办法让这个垂直滚动条底部的x轴？我想我可以改变x轴的背景颜色，当它向下滚动，但我甚至不能得到这一步。
我做了一个CodeSandbox来测试这个。
我也做了一点挖掘，看看是否有人发现了什么，并没有什么超级启发，我可以找到。
我确实找到了这篇文章，但我无法让它在垂直滚动的x轴上工作，而不是如示例所示的水平滚动：Make y-axis sticky when having horizontal scroll on chartJS and Angular

另外，我的图表左上角出现了一个奇怪的元素。我无法识别它是什么，也无法检查它。您知道这是什么吗？

任何提示或建议将不胜感激！
干杯干杯干杯

chart.js

来源：https://stackoverflow.com/questions/73639325/sticky-xaxis-for-vertical-scroll-on-chartjs-also-a-weird-visual-bug-above-my-y

1条答案

按热度按时间

ej83mcc01#

我已经玩过你的密码和：

激活垂直滚动条

更改样式可以使滚动：

<template>
  <div style="overflow-y: scroll">
    <div style="position: relative;  height:200px;">
      <canvas :id="id"></canvas>
    </div>
  </div>
</template>

并设置responsive: true和maintainAspectRatio: true，您可以在图表上垂直滚动。

奇怪的渲染

这是您配置中的一个错误，因为您设置了7个标签，但同时也在数据集上设置了8个值。因此，即使没有任何标签，数据标签插件也会显示数据。添加一个标签，效果很好。

赞(0）回复(0）举报 2022-11-06

我来回答

在Chartjs上垂直滚动的粘滞X轴,在我的Y轴上也有一个奇怪的视觉错误

1条答案

激活垂直滚动条

奇怪的渲染

相关问题

热门标签

最新问答