最大放大和缩小闪电图js

Question

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

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

Answer 1

不清楚你的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, newScaleEnd, false, 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
}