在 LightningChart JS 的顶部、底部和右侧填充

Question

有时我的折线图位于屏幕的最右下方，这使得阅读起来有点困难。如何设置多个折线图周围的填充？

我试过类似的方法，但出现最大堆栈调用大小错误：

// Bind X Axes together.
const HandleScaleChangeX = (chartIndex) => {
    return (start, end) => {
        for (let i = 0; i < charts.length; i++) {
            const axis = charts[i].getDefaultAxisX()
  
            if (end !== xVal) {
                axis.setInterval(start, xVal+50, false, true)
            }
        }
    }
}
for (let i = 0; i < charts.length; i++) {
    const chart = charts[i]
    chart.getDefaultAxisX()
         .onScaleChange(HandleScaleChangeX(i))
}

而以下行（其中 xVal 是图表的长度）工作正常：

axis.setInterval(start, xVal, false, true)

Answer 1

你真的很接近用固定的 X 结束值在右边填充的代码。您只需要更改 if(end !== xVal) 检查以检查 end 是否与 xVal + padding 相同，其中 padding 是您想要作为填充的数量。然后在设置新间隔时，您可以将结束值设置为 xVal + padding.

let padding = 50
if (end !== xVal + padding) {
    axis.setInterval(start, xVal + padding, false, true)
}

在 Y 轴上，您希望同时控制轴间隔的开始和结束，因此 onScaleChange 中对间隔的更改必须汇总到对 setInterval 的单个调用中。填充的应用与刚才在 X 轴上的应用相同，事件附加到 Y 轴。

const axisY = chart.getDefaultAxisY()
let yMaxVal = 15
let yMinVal = 0
axisY.onScaleChange((start, end) => {
    let newScaleStart = start
    let newScaleEnd = end
    let updateInterval = false

    if (end < yMaxVal + padding) {
        newScaleEnd = yMaxVal + padding
        updateInterval = true
    }
    if (start > yMinVal - padding) {
        newScaleStart = yMinVal - padding
        updateInterval = true
    }
    if (updateInterval) {
        axisY.setInterval(newScaleStart, newScaleEnd, false, true)
    }
})

如果您想将 Y 开始和结束固定为特定值，您可以在使用 [= 比较开始和结束与填充值时更改 < 和 > 比较22=]比较。

    if (start !== yMinVal - padding) {
        newScaleStart = yMinVal - padding
        updateInterval = true
    }

这将使 Y 轴最小值保持在固定点上并包含填充。

在 LightningChart JS 的顶部、底部和右侧填充

Padding on top, bottom and right in LightningChart JS

javascript

lightningchart