英文:
Disable y-axis scaling when zooming with react-chartjs-2
问题
有没有办法在时间序列图上缩放时禁用y轴的自动缩放?
您可以在此处观察行为:https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh
当您缩放时,y轴将自动缩放,以使数据占据整个y轴空间。
我的缩放插件如下:
plugins = Object.assign({
"title": {
display: true,
text: title,
align: "start"
},
"legend": {
position: "bottom",
},
"zoom": {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
mode: 'x',
},
pan: {
enabled: true,
mode: 'x',
}
}, 等等 ...
)}
然后我的插件变量存储在options
中,我像这样返回我的图表:
return (
<div>
<Chart ref={canvas} id={id ?? null} type={type} data={data} options={options} />
</div>
)
我在文档中发现,您可以为y轴设置最小/最大值,并且可以通过调整它来实现固定的轴,但我认为这对我不适用,因为我不提前知道我要显示的数据,而且该组件用于显示多个图表。
英文:
Is there a way to disable the auto scaling of y-axis when I'm zooming on a time series chart ?
You can observe the behavior here : https://codesandbox.io/s/react-chartjs-2-line-zoom-pan-9cz0eh
When you zoom the y-axis will scale so the data occupies all the y-axis space.
My zoom plugin looks like this :
plugins = Object.assign({
"title": {
display: true,
text: title,
align: "start"
},
"legend": {
position: "bottom",
},
"zoom": {
zoom: {
wheel: {
enabled: true,
},
pinch: {
enabled: true
},
mode: 'x',
},
pan: {
enabled: true,
mode: 'x',
}
}, ect ...
)}
Then my plugins variable is stored inside options
and I return my chart like that :
return (
<div>
<Chart ref={canvas} id={id ?? null} type={type} data={data} options={options} />
</div>
)
I found in the documentation that you can set a min/max value to your y-axis and that you could play with that to have a fixed axis but that's not applicable for me I think because I don't know in advance what is the data I display and the component is used to display multiple charts
答案1
得分: 1
你可以设置y轴的min
和max
值,而不需要预先知道实际的值:
function freezeAxis(scale) {
scale.options.min = scale.min;
scale.options.max = scale.max;
}
这将把用户的最小值和最大值设置为当前值,并应在图表呈现后(或至少在计算布局后)调用。
如果需要接收新数据或需要进行其他类型的更新,还可以"解冻"轴:
function unfreezeAxis(scale) {
scale.options.min = null;
scale.options.max = null;
}
在这个 你的codesandbox分支 中,我在每次缩放和平移发生之前和之后使用这些函数 - 使用onZoomStart
,onZoomComplete
,onPanStart
和onPanComplete
来处理用户事件(捏合或滚轮),以及在进行任何编程式的缩放/平移调用之前和之后,这些调用不会触发事件处理程序。
这相当繁琐,人们应该考虑根据其应用程序的逻辑来"冻结"和可能"解冻"。例如,这个分支 通过在广播给插件的afterLayout
事件中仅在代码中冻结y轴一次来实现与前一个相同的效果。
英文:
You can set the min
and max
of the y axis without knowing a priori the actual values:
function freezeAxis(scale) {
scale.options.min = scale.min;
scale.options.max = scale.max;
}
This sets the user min and max to the current value and should be called after the chart was rendered (or at least has computed its layout).
You can also "unfreeze" the axis if new data is to be received or other types of update are in order:
function unfreezeAxis(scale) {
scale.options.min = null;
scale.options.max = null;
}
In this fork of your codesandbox I used these functions before and after each zoom and pan occurrence - using onZoomStart
, onZoomComplete
, onPanStart
and onPanComplete
for user events (pinch or wheel) and also before and after any programmatic zoom/pan calls, which don't call the event handlers.
This is rather cumbersome, and one should consider "freezing" and possibly "unfreezing" on the logic of one's application. For instance, this fork achieves the same as the previous, by "freezing" y axis only once in the code, in the afterLayout
event broadcasted to plugins.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论