最大放大和缩小闪电图js

如何解决最大放大和缩小闪电图js

我想设置最大缩放，当我再次尝试下面的代码时，图表崩溃了

const HandleScaleChangeX = (chartIndex) => {
    return (start,end) => {
        for (let i = 0; i < charts.length; i++) {
            const axis = charts[i].getDefaultAxisX()
            if (end !== xVal) {
                if (xVal - start > 100 && xVal - start < xVal * 2) {
                    axis.setInterval(start,xVal,false,true);
                }
            }
        }
    }
}

我试图不将间隔设置为小于 100 并将最大缩放级别设置为 2X

解决方法

不清楚您的 xVal 是什么以及 2X 缩放级别的定义是什么？缩放级别是某个特定范围的 2 倍吗？

如果您的目标是将轴间隔限制在某个特定范围内。例如，确保轴间隔的开始和结束始终大于 100 且小于 200，然后您可以使用 onScaleChange 事件处理程序执行此操作。您只需要跟踪之前的比例是多少。

const axisX = chart.getDefaultAxisX()
let previousScaleStart = 0
let minimumRange = 100
let maximumRange = 200
axisX.onScaleChange((start,end) => {
    let range = end - start

    let newScaleStart = start
    let newScaleEnd = end
    let updateInterval = false

    if (range < minimumRange - 1) {
        // Minimum range
        newScaleStart = xVal - minimumRange
        newScaleEnd = xVal
        updateInterval = true
    } else if (range > maximumRange + 1) {
        // Maximum range
        newScaleStart = xVal - maximumRange
        newScaleEnd = xVal 
        updateInterval = true
    }
    
    // Only update the interval if there is a need
    if (updateInterval) {
        axisX.setInterval(newScaleStart,newScaleEnd,false,true)
    } else {
        // update previous scale info
        previousScaleStart = start
    }
})

请参见下面的示例，其中 X 轴范围限制为始终在 100 - xVal * 2 范围内。

const {
  lightningChart
} = lcjs

const lc = lightningChart()

const chart = lc.ChartXY()

const series = chart.addLineSeries()

const data = [{
    x: 0,y: 5
  },{
    x: 20,y: 10
  },{
    x: 40,y: 0
  },{
    x: 60,y: 2
  },{
    x: 80,y: 8
  },]

series.add(data)

const axisX = chart.getDefaultAxisX()
let previousScaleStart = 0
let xVal = 80
let minimumRange = 100
let maximumRange = xVal * 2
axisX.onScaleChange((start,end) => {
  let range = end - start

  let newScaleStart = start
  let newScaleEnd = end
  let updateInterval = false
  // minimum range
  if (range < minimumRange - 1) {
    newScaleStart = xVal - minimumRange
    newScaleEnd = xVal
    updateInterval = true
  } else if (range > maximumRange + 1) {
    newScaleStart = xVal - maximumRange
    newScaleEnd = xVal
    updateInterval = true
  }

  // Fix x axis end value to the value of xVal
  if (end > xVal) {
    newScaleEnd = xVal
    updateInterval = true
  }

  if (updateInterval) {
    axisX.setInterval(newScaleStart,true)
  } else {
    // update previous scale info
    previousScaleStart = start
  }
})

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

将 X 轴末端固定为特定值可以轻松扩展到此代码。您需要检查轴间隔结束是否与所需结束值不同，并将 newScaleEnd 值更新为 xVal，然后指定要更新间隔。您可以在if(updateInterval)代码

之前添加以下代码

// Fix x axis end value to the value of xVal
if( end !== xVal ){
    newScaleEnd = xVal 
    updateInterval = true
}