仅缩放图表 lightning js 的 x 轴

Question

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

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

此外，无论我在 screen.Is 中单击并拖动到哪里，我都想将 x 轴缩放到 y 轴的全高，这可能吗？谢谢

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

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

此处 250 是固定的，但随着我们滚动，X 值在 0 到 249 之间变化。

Answer 1

您可以禁用与 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, 250, false, 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>

仅缩放图表 lightning js 的 x 轴

zoom only the x axis of chart lightning js

lightningchart