TA貢獻1845條經驗 獲得超8個贊
通常，當使用縮放矩形進行縮小時，閃電圖表JS將使視圖適合當前數據。在您的情況下，您希望返回到原始軸間隔。您可以將偵聽器附加到“規模轉換”事件。在此偵聽器中，您可以檢查新的音階范圍是否大于原始范圍。如果是，請將軸間隔設置回原始范圍。
series.axisX
.onScaleChange((start, end) => {
if (end - start > intervalSize) {
series.axisX.setInterval(end - intervalSize, end)
}
})
“縮小矩形”在閃電圖JS中稱為“擬合矩形”。您可以使用圖表XY.set適合矩形填充樣式和圖表XY.set調整矩形矩形筆觸樣式來更改它的視覺樣式
chart.setFittingRectangleFillStyle(new SolidFill({color: ColorRGBA(255,0,0,125)}))
// Extract required parts from LightningChartJS.
const {
lightningChart,
DataPatterns,
AxisScrollStrategies,
SolidFill,
ColorRGBA
} = lcjs
const {
createProgressiveTraceGenerator
} = xydata
// Create a XY Chart.
const chart = lightningChart().ChartXY()
// Create progressive line series.
const series = chart.addLineSeries({
dataPattern: DataPatterns.horizontalProgressive
})
// configure axis
const intervalSize = 100
series.axisX
.setScrollStrategy(AxisScrollStrategies.progressive)
.setInterval(0, intervalSize)
// limit the axis interval to the original interval size
series.axisX
.onScaleChange((start, end) => {
if (end - start > intervalSize) {
series.axisX.setInterval(end - intervalSize, end)
}
})
// "Zoom out rectangle"
chart.setFittingRectangleFillStyle(new SolidFill({color: ColorRGBA(255,0,0,125)}))
// Generate traced points stream using 'xydata'-library.
createProgressiveTraceGenerator()
.setNumberOfPoints(1000)
.generate()
.setStreamRepeat(true)
.toStream()
.forEach(data => {
series.add(data)
})
<script src="https://unpkg.com/@arction/[email protected]/dist/xydata.iife.js"></script>
<script src="https://unpkg.com/@arction/[email protected]/dist/lcjs.iife.js"></script>
舉報