错误报告：首次呈现禁用动画的图表时，UIElement / ChartMarkerXY 的位置错误

Question

我试图在禁用动画的图表上放置 UIElement / ChartMarkerXY。

不幸的是，UIElement / ChartMarkerXY 在第一次渲染时不在正确的位置。

但是，当我们进行另一个渲染时（例如：当您将鼠标放在图表上以显示自动光标时），它已被移动到正确的位置。

我注意到当启用动画时，动画的第一帧将 UIElement / ChartMarkerXY 放在相同的位置。

目前，我有一个解决方法来防止这种情况发生：chart.engine.renderFrame(0,0)

Demonstration of the bug

您可以在代码片段中找到重现错误的示例：

const {
  AxisPosition,
  AxisTickStrategies,
  emptyLine,
  lightningChart,
  Point,
  UIElementBuilders,
  emptyFill
} = lcjs;

const dataSeries = [
  { x: -5, y: 0 },
  { x: 2, y: -5 },
  { x: 5, y: 6 },
  { x: 8, y: 12 },
  { x: 12, y: -12 }
];

const chart = lightningChart().ChartXY({
  container: 'chart',
});
chart.setAnimationsEnabled(false);
chart.addLineSeries().add(dataSeries);

chart.addUIElement(UIElementBuilders.TextBox, {
    x: chart.getDefaultAxisX(),
    y: chart.getDefaultAxisY()
  })
  .setText('My Text')
  .setPosition({ x: 0, y: 0 });

.lcCanvas {
  width: 500px;
  height: 300px;
}

<script src="https://unpkg.com/@arction/lcjs@3.1.0/dist/lcjs.iife.js"></script>

<h2>Example of the bug</h2>
<div id="chart" class="lcCanvas"></div>

Answer 1

Bug reports should be sent to support@lightningchart.com instead of posting here.
-- Snekw

错误报告已发送。

目前，我找到的解决方法是 chart.engine.renderFrame(0,0)。
这将强制重新渲染图表，并将标记放在正确的位置。

这里是如何实施解决方法的片段。

const {
  AxisPosition,
  AxisTickStrategies,
  emptyLine,
  lightningChart,
  Point,
  UIElementBuilders,
  emptyFill
} = lcjs;

const dataSeries = [
  { x: -5, y: 0 },
  { x: 2, y: -5 },
  { x: 5, y: 6 },
  { x: 8, y: 12 },
  { x: 12, y: -12 }
];

const chart = lightningChart().ChartXY({
  container: 'chart',
});
chart.setAnimationsEnabled(false);
chart.addLineSeries().add(dataSeries);

chart.addUIElement(UIElementBuilders.TextBox, {
    x: chart.getDefaultAxisX(),
    y: chart.getDefaultAxisY()
  })
  .setText('My Text')
  .setPosition({ x: 0, y: 0 });

chart.engine.renderFrame(0, 0); // Workaround: Add this for force the re-render

.lcCanvas {
  width: 500px;
  height: 300px;
}

<script src="https://unpkg.com/@arction/lcjs@3.1.0/dist/lcjs.iife.js"></script>

<h2>Workaround</h2>
<div id="chart" class="lcCanvas"></div>

错误报告：首次呈现禁用动画的图表时，UIElement / ChartMarkerXY 的位置错误

Bug report: Wrong position of the UIElement / ChartMarkerXY when first rendering a chart with animation disabled

javascript

lightningchart