问题描述
我想设置最大缩放,当我再次尝试下面的代码时,图表崩溃了
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
解决方法
不清楚您的 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,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
}