如何使图表水平滚动（使用 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

A

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

• <canvas height="40vh" width="80vw">：无效值 https://www.chartjs.org/docs/latest/configuration/responsive.html

= 任何画布尺寸（如 ( <canvas style="width: 100px;..") + 绝对位置和其他技巧）对她不起作用。

乙

Chart.js 使用其父容器来更新画布渲染和显示大小。然而，此方法要求容器相对定位并且仅专用于图表画布。然后可以通过设置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- 默认为 true （当其容器调整图表画布大小时调整图表画布的大小）

a+b+c

我不知道为什么其他 stackoverflow 答案给出了如此“复杂”的解决方案。Overflow -x的工作方式与任何其他块级元素类似（将 800px w 图像放入 600px W div = 200px Overflow-x）。

“你好世界”示例

针对溢出添加额外的包装器chart-container：

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

当屏幕宽度小于 900px 时，您会得到水平滚动（例如在移动设备上）：

** 如果需要，可以使用CSS 断点在移动设备上调整容器的大小。

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

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

/* 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();
});