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

问题描述

有时我的折线图位于屏幕的右下角，这使得阅读起来有点困难。如何在多个折线图周围设置内边距？

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

// 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,true)

解决方法

您真的很接近实现带有固定 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,true)
    }
})

如果您想将 Y 开始和结束固定为特定值，您可以在使用 {{1} 将开始和结束与填充值进行比较时更改 < 和 > 比较} 比较。

!==

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

javascript lightningchart