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 開始和結束固定為特定值，您可以在使用!==比較開始和結束與填充值進行比較時更改<和>比較。

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

這將使 Y 軸最小值保持在包含填充的固定點上。