如何使图表水平滚动(使用Chart.js时)

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

关注(0)|答案(2)|浏览(284)

我已经检查了this question和this question，并使图表可以水平滚动，但它的高度也增加了，现在它也可以垂直滚动。我如何使图表可以水平滚动，而不垂直扩展它？

HTML
<div class="chartWrapper">
 <div class="chartAreaWrapper">
    <div class="chartAreaWrapper2">
        <canvas id="canvas"></canvas>
    </div>
</div>
<canvas id="myChartAxis" height="300" width="0"></canvas>
</div>

JS
var ctx = document.getElementById('canvas').getContext('2d');
        window.myLine = new Chart(ctx, config);
        var sourceCanvas = myLiveChart.chart.canvas;
                    var copyWidth = myLiveChart.scales['y-axis-0'].width - 10;
                    var copyHeight = myLiveChart.scales['y-axis-0'].height + myLiveChart.scales['y-axis-0'].top + 10;
                    var targetCtx = document.getElementById("myChartAxis").getContext("2d");
                    targetCtx.canvas.width = copyWidth;
            targetCtx.drawImage(sourceCanvas, 0, 0, copyWidth, copyHeight, 0, 0, copyWidth, copyHeight);

CSS
.chartWrapper {
        position: relative;

    }
    .chartWrapper > canvas {
        position: absolute;
        left: 0;
        top: 0;
        pointer-events:none;
    }
.chartAreaWrapper {
      overflow-x: scroll;
        position: relative;
        width: 100%;
    }
    .chartAreaWrapper2 {
        position: relative;
        height: 300px;
}

chart.js

来源：https://stackoverflow.com/questions/60791262/how-to-make-a-chart-scroll-horizontally-when-using-chart-js

2条答案

按热度按时间

4szc88ey1#

一

chart.js docs：“以下示例无效：“

<canvas height="40vh" width="80vw">：无效的值https://www.chartjs.org/docs/latest/configuration/responsive.html
=任何画布大小，如（<canvas style="width: 100px;.."）+绝对位置和其他技巧都对她无效。

B

**Chart.js使用其父容器更新画布呈现和显示大小。**但是，此方法要求容器相对定位并仅专用于图表画布。然后可以通过为www.example.com设置相对值来实现响应https://www.chartjs.org/docs/latest/configuration/responsive.html#important-note

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

=为chart-container设置所需的任意大小。

c

maintainAspectRatio-默认情况下为true（调整大小时保持原始画布纵横比（宽度/高度））。
responive- by deault true（当容器调整图表画布大小时调整其大小）

a+B+c

我不知道为什么其他stackoverflow的答案给予了如此“复杂”的解决方案。overflow-x her的工作原理和其他块级元素一样（将800 px w image放入600 px W div = 200 px overflow-x中）。

“hello world”示例

针对溢出，向chart-container添加额外的 Package ：

<div style="overflow-x: scroll">
  <div class="chart-container" style="position: relative;  width:900px;">
    <canvas id="chart"></canvas>
  </div>
</div>

当屏幕宽度小于900 px时，您可以水平滚动（例如在移动的上）：