改变Chartjs水平滚动方向
改变Chartjs水平滚动方向
提问于 2022-08-21 18:13:46
我想以这样的方式改变水平滚动条形图上滚动的方向，从右侧滚动到left (RTL)。我不确定它是否被支持。如果不是，那么是否有一种方法可以在加载时将programmatically滚动到图表的极右，以达到预期的结果。
const chartsoptions = {
type: 'bar',
data: {
labels: ["1", "2", "3", "4", "5", "6",],
datasets: [{
label: 'OFF',
data: [1, 2, 3, 4, 5, 6],
backgroundColor: [ 'rgba(255, 99, 132, 0.4)', ],
borderColor: [ 'rgb(255, 99, 132)', ],
borderWidth: 1
},{
label: 'On',
data: [6, 5, 4, 3, 2, 1],
backgroundColor: [ 'rgba(75, 192, 192, 0.4)', ],
borderColor: ['rgb(75, 192, 192)', ],
borderWidth: 1
}]
},
options: {
plugins: {
legend: {
display: true,
labels: {
font: {
size: 20,
weight: "bold",
},
}
},
datalabels: {
anchor: 'center',
clamp: true,
display: true,
textAlign: 'center',
borderRadius: 3,
color: "black",
clip: true,
font: {
size: 20,
weight: "bold",
},
},
zoom: {
zoom: { wheel: { enabled: false, }, mode: 'x', },
pan: { enabled: true, mode: 'x', },
limits: { x: { minRange: 3 }, },
}
},
scales: {
x: { ticks: { font: { size: 20, weight: "bold" }, } },
y: { ticks: { font: { size: 20, weight: "bold" }, } },
}
}
}
const ctx = document.getElementById('dailyonoff').getContext('2d');
document.getElementById('dailyonoff').style.backgroundColor = "white";
const chart = new Chart(ctx, chartsoptions);
setTimeout(() => {
chart.zoom(2);
chart.pan({
x: Number.MAX_SAFE_INTEGER
}, undefined, 'default');
}, 10)<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js" integrity="sha256-+8RZJua0aEWg+QVVKg4LEzEEm/8RFez5Tb4JBNiV5xA=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-zoom/1.1.1/chartjs-plugin-zoom.js"></script>
</head>
<body>
<canvas id="dailyonoff" class="onoff" width="300" height="200" ></canvas>
</body>
</html>
回答 1
Stack Overflow用户
发布于 2022-08-22 13:18:10
我找到了导航(pan)到图形末尾的解决方案。只需替换：
MAX_SAFE_INTEGER通过以下方式：
MIN_SAFE_INTEGER页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73437105
复制相关文章
相似问题
腾讯云开发者
