[Bug]

[axlch123]

版本

9.8.2

复现步骤

// 初始化图表
const initChart = async () => {
if (!chartRef.value) return

if (kLineChart.value) {
kLineChart.value.destroy()
}

kLineChart.value = init(chartRef.value)

kLineChart.value.setStyles({
// 网格线
grid: {
show: true,
horizontal: {
show: true,
size: 1,
color: '#EEE',
style: 'line'
},
vertical: {
show: false
}
},
xAxis: {
show: true,
size: 'auto',
position: 'bottom',
type: 'ordinal',
inside: false,
reverse: false,
// x轴线
axisLine: {
show: true,
color: '#EEE'
},
// y轴分割文字
tickText: {
show: true,
color: '#666',
weight: 'normal',
size: 12,
marginStart: 4,
marginEnd: 4
},
tickTextFormatter: timestamp => {
// 假设你已预处理数据，知道哪些是月初
if (timestamp) {
return timestamp.substring(0, 7)
}
return ''
}
},
yAxis: {
show: true,
size: 'auto',
position: 'left',
type: 'normal',
inside: false,
reverse: false,
// y轴线
axisLine: {
show: false
},
// x轴分割文字
tickText: {
show: true,
color: '#666',
weight: 'normal',
size: 12,
marginStart: 4,
marginEnd: 4
}
},
// 蜡烛图
candle: {
type: 'candle_solid',
margin: {
top: 0.1,
bottom: 0.1
},
priceMark: {
show: false
},
// 提示
tooltip: {
show: false,
// 'always' | 'follow_cross' | 'none'
showRule: 'none'
}
}
})
// kLineChart.value.createIndicator('MA', false, {
// id: 'candle_pane'
// })

// 加载初始数据
const initialData = await queryKLineData()
console.log('initialData', initialData)
kLineChart.value.applyNewData(initialData)

queryBsRecords()

if (initialData && initialData.length > 0) {
const last = initialData[initialData.length - 1]
selectedData.value = { timestamp: last.timestamp, open: last.open, close: last.close, high: last.high, low: last.low }
}

// 监听 K 线点击
kLineChart.value.subscribeAction('onCandleBarClick', (event: any) => {
if (event.data) {
const { timestamp, open, close, high, low } = event.data
Object.assign(selectedData.value, { timestamp, open, close, high, low })
}
})

//监听可见范围变化（滑动到最左）
kLineChart.value.subscribeAction('onVisibleRangeChange', (event: any) => {
console.log('visibleRange', event)
// event.realFrom === 0 表示已经滑到最左边
if (event && event.realFrom <= 0 && !loading.value) {
console.log('滑动到最左侧，加载更早数据...')
loadOlderData()
}
})
}

当前效果

如图，出现x轴的月度刻线与真实k线图存在偏移的情况

预期效果

轴线与k线的日期匹配准确

环境

- 系统:
- 浏览器:
- 框架:

补充说明

No response