我在 react.js 中實作了一個條形圖，我想弄清楚當值越來越多時如何在 x 軸上滾動。在下面的圖表中，我有一些用戶在一天內執行的搜索值。到目前為止，我有 100 多天的時間，我認為我的問題會更大，直到年底我將在 x 軸上有更多的值。
我的圖表代碼和選項如下。
const options = {
responsive: true,
plugins: {
title: {
display: true,
},
},
};
const dataForSearchBins = {
labels,
datasets: [
{
label: "Number of searches",
data: searchBins?.map((item) => item.value),
backgroundColor: "lightBlue",
},
],
};
<Stack>
<Text style={{ textAlign: "center" }}>{`Number of clicks per ${binSize.toLowerCase()}`}</Text>
<Bar options={options} data={data} />
<Box mb={6} />
</Stack>
uj5u.com熱心網友回復：
您可以為此使用chartjs-plugin-zoom。
import zoomPlugin from 'chartjs-plugin-zoom';
import { Chart as ChartJS} from 'chart.js';
ChartJS.register(zoomPlugin);
注冊縮放插件后，修改options物件。
const options = {
responsive: true,
plugins: {
title: {
display: true,
},
zoom: {
pan: {
enabled: true,
mode: 'x'
},
zoom: {
pinch: {
enabled: true // Enable pinch zooming
},
wheel: {
enabled: true // Enable wheel zooming
},
mode: 'x',
}
}
},
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/491221.html
標籤：javascript 反应 材料-ui 图表.js 条形图