javascript - 如何使图表水平滚动(使用 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/configuration/responsive.html

= 任何 Canvas 大小，如 ( <canvas style="width: 100px;..") + 绝对位置和其他技巧对她不起作用。

b

Chart.js uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the 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(调整大小时保持原始 Canvas 纵横比(宽度/高度))。

• responive - 默认为 true(当其容器调整图表 Canvas 的大小时)

a+b+c

我不知道为什么其他 stackoverflow 答案会给出如此“复杂”的解决方案。 overflow-x她的工作方式与任何其他 block 级元素一样(将 800px w image inside 600px W div = 200px overflow-x)。

“ Hello World ”示例

特定于溢出，将额外的包装器添加到 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>