仅缩放图表闪电js的x轴

如何解决仅缩放图表闪电js的x轴

如何在通过触摸板向上滑动时仅缩放 x 轴，并在向左或向右滑动时向左或向右平移

 chart[1].getDefaultAxisY()
  .setScrollStrategy(undefined)
  .setInterval(-250,250)

此外，无论我在屏幕中单击和拖动何处，我都想以 y 轴的全高缩放 x 轴。这可能吗？谢谢

我也可以使用自定义函数控制滚动行为，例如如果我希望通过保持系列的最后一个值固定来滚动，我不知道如何解释，但类似这样的事情

onScroll()
    {
    axisX.setInterval(X,250);
    }

这里 250 是固定的，但随着我们滚动，X 值从 0 到 249 变化。

解决方法

您可以使用 axis.setChartInteractions(false) 禁用轴图交互。这将禁用鼠标滚轮缩放、拖动缩放、拖动适合轴和拖动平移。这意味着当缩放交互完成时，只有 X 轴会缩放。

或者，您可以单独控制每个交互。 axis.setChartInteractionFitByDrag axis.setChartInteractionPanByDrag axis.setChartInteractionZoomByDrag axis.setChartInteractionZoomByWheel

您还可以禁用轴上的交互。

要将轴间隔结束值保持为单个值，您可以将侦听器附加到轴上的 onScaleChange 事件。当轴的比例发生变化时，将调用此事件。当间隔发生变化时，事件处理程序将接收下一个间隔的开始和结束值。在处理程序中，您可以强制间隔结束值保持不变。

const axisX = chart.getDefaultAxisX()

axisX.onScaleChange((start,end) => {
    if (end !== 250)
        axisX.setInterval(start,250,false,true)
})

const {
  lightningChart,SolidLine,SolidFill,ColorRGBA,AxisTickStrategies,UIOrigins,DataPatterns,Themes
} = lcjs

const {
  createProgressiveTraceGenerator
} = xydata

const chart = lightningChart().ChartXY()

const lineSeries = chart.addLineSeries()

const lineSeries2 = chart.addLineSeries()

const generator = createProgressiveTraceGenerator()
  .setNumberOfPoints(250)

const dataSets = [
  generator
  .generate()
  .toPromise(),generator
  .generate()
  .toPromise()
]

Promise.all(dataSets)
  .then((data) => {
    lineSeries.add(data[0])
    lineSeries2.add(data[1])
  })

chart.getDefaultAxisY()
  .setChartInteractionFitByDrag(false)
  .setChartInteractionZoomByDrag(false)
  .setChartInteractionPanByDrag(false)
  .setChartInteractionZoomByWheel(false)

// setup handler to keep interval end at 250
const axisX = chart.getDefaultAxisX()
axisX.onScaleChange((start,end) => {
  if (end !== 250)
    axisX.setInterval(start,true)
})

<script src="https://unpkg.com/@arction/xydata@1.4.0/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/@arction/lcjs@2.2.1/dist/lcjs.iife.js"></script>