Chart.js 2.7.0 如何动态添加水平滚动条，然后删除它

Question

[编辑]只要看看我的答案就可以了解如何滚动（或不滚动，取决于栏宽），以及如何使用锁定的 y 轴滚动，以及如何在栏中显示文本，但要有它们需要时垂直翻转。[编辑结束]

添加水平滚动的公认解决方案是执行以下操作：

将 canvas 置于固定大小 div。然后，将 div 放入允许滚动的容器中。

好的，太好了。但在我真的需要滚动之前，我希望 canvas 占据 window 的 100% 的高度和宽度。这就是我的意思：

例如，这是原来的建议：

<body style="height: 100%; width: 100%; overflow: hidden; margin: 0;">
<div id="canvas-wrapper" style="height: 100%; width: 100%; overflow-x: scroll; overflow-y: hidden;">
<div id="canvas-holder" style="height: 100%; width: 500px;" oncontextmenu="return false;">
<canvas id="myChart"></canvas>
</div>
</div>
</body>

http://jsfiddle.net/jmpxgufu/152/

当您查看此 jsfiddle 时，您会看到包装器将 overflow-x 设置为滚动，固定大小 div 设置为（随机）500px。因此，在 jsfiddle 中，如果将输出 window 大小调整为小于 500 px，它会添加滚动条（当然！），但是当 window 大小大于 500px 时，我只是在图表右侧获取空白 space。呸

所以，我正在尝试一些事情，如果我有一些事件（这里我使用了动画，onComplete 事件）如何，为我们调整它。我想（随机），如果条形宽度低于 14，我可以打开滚动：

<body style="height: 100%; width: 100%; overflow: hidden; margin: 0;">
<div id="canvas-wrapper" style="height: 100%; width: 100%; overflow-x: hidden; overflow-y: hidden;">
<div id="canvas-holder" style="height: 100%; width: 100%;" oncontextmenu="return false;">
<canvas id="myChart"></canvas>
</div>
</div>
</body>

http://jsfiddle.net/jmpxgufu/154/

这个问题是，一旦我从不滚动切换到滚动，动画事件就会停止触发（这个东西曾经为我移动 window 的每个像素触发）。所以我不能把它设置回不滚动，一旦我打开滚动。

如果该事件始终触发，在条大于 14 的情况下，我可以将其设置回不滚动。

其他人是怎么做到的？我不可能是唯一一个不想固定图表的人 - 永远！

谢谢。

Answer 1

对于想知道的人：

如何在 chart.js 图表中添加滚动和水平滚动
并让它动态显示在特定的条宽（在本例中），否则没有滚动（它适合 window）。
并使滚动的 y 轴在您开始滚动时不会消失（锁定的 y 轴）。
并使文本在栏中居中
当栏达到一定宽度时，此文本会垂直翻转

嗯...这里有一些代码要看！

<body style="height: 100%; width: 100%; overflow: hidden; margin: 0;">
<div id="chartWrapper" style="height: 100%; width: 100%;">
   <div id="canvas-wrapper" style="height: 100%; width: 100%; overflow-x: hidden; overflow-y: hidden;">
      <div id="canvas-holder" style="height: 100%; width: 100%;" oncontextmenu="return false;">
      <canvas id="myChart" style="background-Color: white"></canvas>
      </div>
   </div>
   <canvas id="myChartAxis" style="position: absolute; top: 0; left: 0; pointer-events: none; height: 100%; width: 0px; background-Color: white"></canvas>
</div>
</body>

http://jsfiddle.net/jmpxgufu/159/

（一个警告：我不确定为什么，但是当我发布我的代码时，该代码与我在开发时在本地链接到的 chart.js 库一起工作，并且我在本地进行了测试，给了我所有放入 jsfiddle 时的错误类型。所以这段代码很快被修改为可以工作——所以它可能并不完美，但会给你一些想法）

Chart.js 2.7.0 如何动态添加水平滚动条，然后删除它

Chart.js 2.7.0 How to add Horizontal scrollbar dynamically, and then remove it

javascript

css

html

chart.js2