如何使圖表水平滾動（使用 Chart.js 時）

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;
}

Answer 1

一種

chart.js docs ：“以下示例不起作用：”

• <canvas height="40vh" width="80vw"> ：無效值，畫布不會調整大小https://www.chartjs.org/docs/latest/general/responsive.html

= 任何畫布尺寸，如 ( <canvas style="width: 100px;.." ) + position absolute 和其他技巧對她不起作用。

乙

Chart.js 使用其父容器來更新畫布渲染和顯示大小。 但是，此方法要求容器相對定位並僅專用於圖表畫布。 然后可以通過設置容器大小的相對值來實現響應性https://www.chartjs.org/docs/latest/general/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 - 默認為 true（在容器執行時調整圖表畫布的大小）

a+b+c

我不知道為什么其他 stackoverflow 答案會給出如此“復雜”的解決方案。 溢出-x her 的工作方式與任何其他塊級元素一樣（將 800 像素寬圖像放入 600 像素寬 div = 200 像素溢出-x）。

“你好世界”示例

特定於溢出向chart-container添加額外的包裝chart-container ：

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

當屏幕寬度小於 900px 時，您會得到水平滾動（例如在移動設備上）：

** 如果需要，可以使用CSS 斷點在移動設備上調整容器的大小。

 /* data */ var data = { labels: ["Africa", "Asia", "Europe", "America"], datasets: [{ /* data */ label: "Data label", backgroundColor: ["red", "#8e5ea2","#3cba9f", '#1d49b8'], data: [5.0,6.7,7.5, 8.6, 3.3, 4.4, 4.5] }] }; var options = { responsive: true, maintainAspectRatio: true, title: { text: 'Hello', display: true }, scales: { xAxes: [{ stacked: false, ticks: { }, }], yAxes: [{ stacked: true, ticks: { } }] } }; var myChart = new Chart(document.getElementById("chart"), { type: 'bar', data: data, options: options }); document.getElementById('submitChange').addEventListener('click', function() { console.log("before color: " + myChart.data.datasets[0].backgroundColor[0]); myChart.data.datasets[0].backgroundColor[0] = "green"; myChart.update(); });

 div{ border: 1px solid red; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script> <div style="overflow-x: scroll"> <div class="chart-container" style="position: relative; width:900px;"> <canvas id="chart"></canvas> </div> </div>

Answer 2

使用“溢出-x：滾動；” 而不是“溢出：滾動；”