如何使图表水平滚动（使用 Chart.js 时）

Question

我检查了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;
}

Answer 1

一个

chart.js docs: "以下示例无效："

• <canvas height="40vh" width="80vw">: 无效值，画布不会调整大小 https://www.chartjs.org/docs/latest/general/responsive.html

= 任何像 (<canvas style="width: 100px;..") + 绝对位置和其他技巧这样的画布尺寸都不适合她。

b

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 答案会给出如此“复杂”的解决方案。 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>

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

** 如果需要，可以使用 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:scroll;”而不是“溢出：滚动；”