如何在Chart.js中为折线图创建垂直滚动？

Question

我按Chart.Js垂直创建了多个折线图。现在，我想添加垂直滚动，以便通过垂直滚动也可以查看其他图形。

我在文档中没有看到此选项。有什么想法吗？

Answer 1

您想实现哪种类型的垂直滚动？如果要垂直滚动整个图表，为什么不将Chart.JS使用的canvas元素放在div中。例如：

<div id="chartContainer">
    <canvas id="myChart"></canvas>
</div>

然后添加CSS为画布提供高度，并为容器提供较小的高度/溢出-y。

    #chartContainer{ overflow: scroll, height: 300px; }  #myChart{ height: 600px; }

---

编辑1上面的代码段对我有用。如果不看笔，就很难理解图表的具体问题是什么，以及该代码片段的工作方式与预期行为有何不同。

没有笔或更多细节，我只能猜测，但是问题是您已将溢出属性添加到了容器中，但是没有滚动发生（即，显示了完整的图表）？

[如果是这样，则可能只是图表的大小小于容器的溢出边界（可以通过在浏览器中检查画布和容器元素以查看画布是否大于容器来轻松地对其进行测试）。如果是这种情况，并且您想增加图表的大小（以便在每次查看页面时都强制溢出），则可以使用chart.js documentation中的指南进行操作。

以下此类配置的基本示例：

HTML，将滚动容器和图表容器分开，以允许分别调整图表元素的大小：

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div id="scrollContainer">
  <div id="chartContainer">
    <canvas id="myChart" ></canvas>
  </div>
</div>
CSS，在chartContainer中增加大小以调整图表大小：

#scrollContainer{
  height: 300px;
  overflow-y: auto;

}
#chartContainer{
  height: 600px;
  width: 500px;
  position: relative;

}
JavaScript图表对象，其高宽比属性设置为false：

new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1800,1900,2001],
    datasets: [{ 
        data: [86,114,106,86,114,106],
        label: "Africa",
        borderColor: "#3e95cd",
        fill: false
      }, { 
        data: [282,350,411,282,350,411],
        label: "Asia",
        borderColor: "#8e5ea2",
        fill: false
      }, { 
        data: [168,170,178,168,170,178],
        label: "Europe",
        borderColor: "#3cba9f",
        fill: false
      }
    ]
  },
  options: {
    maintainAspectRatio: false
  }
});
演示：

new Chart(document.getElementById("myChart"), {
  type: 'line',
  data: {
    labels: [1500,1600,1700,1800,1900,2001],
    datasets: [{ 
      data: [86,114,106,86,114,106],
      label: "Africa",
      borderColor: "#3e95cd",
      fill: false
    }, { 
      data: [282,350,411,282,350,411],
      label: "Asia",
      borderColor: "#8e5ea2",
      fill: false
    }, { 
      data: [168,170,178,168,170,178],
      label: "Europe",
      borderColor: "#3cba9f",
      fill: false
    }
    ]
  },
  options: {
    maintainAspectRatio: false
  }
});
#scrollContainer{
  height: 300px;
  overflow-y: auto;

}
#chartContainer{
  height: 600px;
  width: 500px;
  position: relative;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>

<div id="scrollContainer">
  <div id="chartContainer">
    <canvas id="myChart" ></canvas>
  </div>
</div>