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

Question

我按照chart的顺序垂直创建了一个多折线图。Js。现在我想添加垂直滚动，这样我也可以通过垂直滚动来查看其他图形。

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

Answer 1

您想要实现哪种类型的垂直滚动？如果你试图垂直滚动整个图表，为什么不放chart使用的画布元素呢。div内部的JS。例如

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

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

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

---

编辑1上面的片段对我很有用。如果没有看到笔，很难理解图表的具体问题是什么，以及这个片段与你的预期行为有何不同。

如果没有笔或更多细节，我只能猜测，但问题是你在容器中添加了溢出属性，但没有滚动(即显示了完整的图表(吗？

如果是这样，可能只是图表的大小小于容器的溢出边界(通过在浏览器中检查画布和容器元素，查看画布是否大于容器，可以很容易地测试溢出边界(。如果是这种情况，并且您希望增加图表的大小(以便在查看页面时强制发生溢出(，则可以使用chart.js文档中的指导进行操作。

以下配置的基本示例：

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，将大小添加到图表Container以调整图表大小：

#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>