更改Chartjs水平滚动方向



我想更改水平滚动条形图上的滚动方向,使滚动从开始到(RTL(。我不确定它是否得到支持。如果不是,那么有没有一种方法可以在加载时以编程方式滚动到图表的最右侧以实现所需的结果。

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>

我找到了导航(平移(到图的末尾的解决方案。仅替换:

MAX_SAFE_INTEGER

带有:

MIN_SAFE_INTEGER

相关内容

  • 没有找到相关文章

最新更新