如何调试Lightning Chart日期时间错误

Question

我目前正在Vue应用程序中使用Lightning Chart。在挂载之前，我创建了如下图表：

const createChart = () => {
chart.value = lightningChart().ChartXY({container: `${chartId.value}`})
// .setBackgroundFillStyle(new SolidFill({ color: ColorHEX('#ffffff'), alpha: 100 }))
.setPadding({ left: 5, right: 5, top: 5, bottom: 5 })
.setTitleMarginBottom(0)
.setTitleMarginTop(0)
// Set chart title
chart.value.setTitle("Power Spectrum Density");
chart.value.setTitleFont(new FontSettings({ size: 12, style: 'italic' }));


// Set up axes
chart.value.getDefaultAxisX()
.setTitle("Time")
.setTitleFillStyle(new SolidFill({ color: ColorHEX('#FFF') }))
.setTitleFont(new FontSettings({ size: 12, style: 'italic' }))
------>>> .setTickStrategy(AxisTickStrategies.DateTime)  /*, (tickStrategy) => tickStrategy.setTimeOrigin(props.startTime)) */
chart.value.getDefaultAxisY()
.setTitleFillStyle(new SolidFill({ color: ColorHEX('#FFF') }))
.setTitleFont(new FontSettings({ size: 12, style: 'italic' }))
.setTitle("Frequency (Hz)")
.setInterval(0, 750, false, true);
...
... 
const spectrogramColumns = data.length;
const spectrogramRows = data[0].length;
const heatmapSeries = chart.value.addHeatmapGridSeries({
columns: spectrogramColumns,
rows: spectrogramRows,
heatmapDataType: "intensity",
})
.setFillStyle(paletteFill);
heatmapSeries.addIntensityValues({
iRow: 0,
iColumn: 0,
values: data,
})

}

然而，这会导致以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'get')
at n.t.$i (lcjs.js?add5:1:1)
at m (lcjs.js?add5:1:1)
at n.t.zn (lcjs.js?add5:1:1)
at n.t.On (lcjs.js?add5:1:1)
at n.Xu (lcjs.js?add5:1:1)
at eval (lcjs.js?add5:1:1)
at Array.reduce (<anonymous>)
at i.a.yT (lcjs.js?add5:1:1)
at i.Xu (lcjs.js?add5:1:1)
at i.eval [as rr] (lcjs.js?add5:1:1)

只有当SetTickStrategy包含在内时，我才会收到此错误，否则图表将按预期工作。我是否遗漏了DateTime勾选策略所需的内容？也许值得注意：

• 我一直在使用https://www.arction.com/lightningchart-js-interactive-examples/edit/lcjs-example-0021-dateTimeAxisOrigin.html?theme=lightNew&页面主题=浅色
• 我尝试过使用TimeTickStrategy，它给出了相同的结果
• 我正在导入必要的组件

Answer 1

此崩溃似乎是由Vue引起的。更具体地说，如果LightningChart JS图表实例被放置到Vueref，就会发生这种情况。若要解决此问题，请改用shallowRef。

const chart = shallowRef();

https://codepen.io/snekw/pen/podmPjQ