在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中对interval的更改必须聚合到对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轴的最小值保持在包含填充的固定点上。