使用react-chartjs-2进行缩放时禁用Y轴缩放。

huangapple go评论71阅读模式
英文:

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({
		&quot;title&quot;: {
			display: true,
			text: title,
			align: &quot;start&quot;
		},
		&quot;legend&quot;: {
			position: &quot;bottom&quot;,
		},
		&quot;zoom&quot;: {
			zoom: {
				wheel: {
					enabled: true,
				},
				pinch: {
					enabled: true
				},
				mode: &#39;x&#39;,
			},
			pan: {
				enabled: true,
				mode: &#39;x&#39;,

			}
		}, ect ...
          )}
             

Then my plugins variable is stored inside options and I return my chart like that :

return (
        &lt;div&gt;
            &lt;Chart ref={canvas} id={id ?? null} type={type} data={data} options={options} /&gt;
        &lt;/div&gt;
    )

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轴的minmax值,而不需要预先知道实际的值:

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分支 中,我在每次缩放和平移发生之前和之后使用这些函数 - 使用onZoomStartonZoomCompleteonPanStartonPanComplete来处理用户事件(捏合或滚轮),以及在进行任何编程式的缩放/平移调用之前和之后,这些调用不会触发事件处理程序。

这相当繁琐,人们应该考虑根据其应用程序的逻辑来"冻结"和可能"解冻"。例如,这个分支 通过在广播给插件的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.

huangapple
  • 本文由 发表于 2023年2月27日 18:33:07
  • 转载请务必保留本文链接:https://go.coder-hub.com/75579329.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定