初始化图表后如何在 LightningChart JS 中添加 defaultAxisXTickStrategy?
How to add defaultAxisXTickStrategy in LightningChart JS after initialising the chart?
我正在像这样初始化图表
this.chart = lightningChart()
.ChartXY({
containerId: 'chartSection',
theme: Themes.light
})
.setTitle('')
稍后绑定数据,并希望在稍后获取数据时添加 defaultAxisXTickStrategy
。
defaultAxisXTickStrategy
只能在创建图表时设置。
我假设您希望轴的报价策略与您获得的数据相匹配。为此,您可以使用图表的 addAxisX 方法手动创建轴。此方法接受 axisTickStrategy
选项。然后要使用刚刚创建的这个轴,您可以将创建的轴提供给 addLineSeries
(或任何其他添加...系列)方法选项。 {xAxis: createdAxis}
。
// Create a new chart
const chart = lcjs.lightningChart().ChartXY({
containerId: 'target'
})
.setTitle('Demo Chart')
// after 2 seconds start adding data
setTimeout(() => {
const dateOrigin = new Date()
// create a new axis
const createdAxis = chart.addAxisX(
false, lcjs.AxisTickStrategies.DateTime(dateOrigin)
)
// create a new series using the previously created axis for X axis
const lineSeries = chart.addLineSeries({
xAxis: createdAxis
})
// dispose the default axis from X axis
chart.getDefaultAxisX().dispose()
// add new data twice a second
let i = 0
setInterval(() => {
lineSeries.add({
x: 1000 * i,
y: Math.random() * 10
})
i++
}, 500)
}, 2000)
body {
height: 100vh;
}
<script src="https://unpkg.com/@arction/lcjs@1.2.2/dist/lcjs.iife.js"></script>
<div style="height: 100%;" id="target"></div>
我正在像这样初始化图表
this.chart = lightningChart()
.ChartXY({
containerId: 'chartSection',
theme: Themes.light
})
.setTitle('')
稍后绑定数据,并希望在稍后获取数据时添加 defaultAxisXTickStrategy
。
defaultAxisXTickStrategy
只能在创建图表时设置。
我假设您希望轴的报价策略与您获得的数据相匹配。为此,您可以使用图表的 addAxisX 方法手动创建轴。此方法接受 axisTickStrategy
选项。然后要使用刚刚创建的这个轴,您可以将创建的轴提供给 addLineSeries
(或任何其他添加...系列)方法选项。 {xAxis: createdAxis}
。
// Create a new chart
const chart = lcjs.lightningChart().ChartXY({
containerId: 'target'
})
.setTitle('Demo Chart')
// after 2 seconds start adding data
setTimeout(() => {
const dateOrigin = new Date()
// create a new axis
const createdAxis = chart.addAxisX(
false, lcjs.AxisTickStrategies.DateTime(dateOrigin)
)
// create a new series using the previously created axis for X axis
const lineSeries = chart.addLineSeries({
xAxis: createdAxis
})
// dispose the default axis from X axis
chart.getDefaultAxisX().dispose()
// add new data twice a second
let i = 0
setInterval(() => {
lineSeries.add({
x: 1000 * i,
y: Math.random() * 10
})
i++
}, 500)
}, 2000)
body {
height: 100vh;
}
<script src="https://unpkg.com/@arction/lcjs@1.2.2/dist/lcjs.iife.js"></script>
<div style="height: 100%;" id="target"></div>