Как отобразить текущие значения серий в легенде LightningChart JS ⇐ Javascript

[Anonymous]

Я использую библиотеку LightningChart JS (https://www.npmjs.com/package/@lightningchart/lcjs) для отображения нескольких линейных трендов с прокруткой временного окна. Данные поступают из веб-сокета в режиме реального времени.
В библиотеке есть встроенная функция: я могу навести указатель мыши на диаграмму, и появится всплывающее окно, показывающее ближайшие значения из всех трендов. Это очень хорошо, но мне нужно, чтобы оно вело себя немного по-другому. Вместо мешающего всплывающего окна мне нужно, чтобы значения отображались сбоку. Чтобы лучше понять, посмотрите на эту интерактивную диаграмму как на отправную точку для решения моей проблемы:

Код: Выделить всё

const {
lightningChart, Themes, LegendPosition,
AxisScrollStrategies, AxisTickStrategies
} = lcjs

const lc = lightningChart()
const chart = lc.ChartXY({
theme: Themes.light,
defaultAxisX: {
type: 'linear-highPrecision'
},
legend: {
position: LegendPosition.TopLeft
}
})
chart.setTitle('')
chart.axisX
.setScrollStrategy(AxisScrollStrategies.scrolling)
.setTickStrategy(AxisTickStrategies.DateTime)
.setInterval({ start: 0, end: 10000, stopAxisAfter: false })

const series1 = chart.addLineSeries({ schema: { x: { pattern: 'progressive' }, y: { pattern: null } } }).setName('Trend 1')
const series2 = chart.addLineSeries({ schema: { x: { pattern: 'progressive' }, y: { pattern: null } } }).setName('Trend 2')
const series3 = chart.addLineSeries({ schema: { x: { pattern: 'progressive' }, y: { pattern: null } } }).setName('Trend 3')

setInterval(() => {
const x = Date.now()
series1.appendSample({ x, y: Math.random() })
series2.appendSample({ x, y: Math.random() * 10 })
series3.appendSample({ x, y: -Math.random() * 5 })
}, 1000/60)

Код: Выделить всё

Обратите внимание на легенду в левом верхнем углу. В идеале я бы хотел, чтобы там отображались текущие указанные значения. В настоящее время всегда написано «Тренд 1», «Тренд 2» и т. д. Когда указатель мыши находится над диаграммой, я бы хотел, чтобы они отображались так: «Тенденция 1: 10.1».
Я нашел документацию по курсорам здесь https://lightningchart.com/js-charts/do ... om-cursors
В частности, есть раздел «Пользовательские курсоры», в котором упоминается доступность API для подключения пользовательского курсора. логика. Я попробовал добавить это:

Код: Выделить всё

chart.setCustomCursor((event) => {
console.log(event)
})

Результат примерно такой:

Код: Выделить всё

{
hits: [
cursorPosition,
iSample,
x,
y,
sample,
...
]
}

Значение y — это все, что мне нужно, так что это хорошо. Но я не смог найти способ связать это с легендой. Я нашел следующие потенциальные API, но даже не знал, какие параметры им задать:

• chart.legend.setEntryOptions – https://lightningchart.com/js-charts/ap ... tryOptions
• chart.legend.setOptions – https://lightningchart.com/js-charts/ap ... setOptions
• series.setCursorFormattingOverride – https://lightningchart.com/js-charts/ap ... ngOverride

Переопределение форматирования курсора кажется наиболее многообещающим, но я не думаю, что оно работает вместе с setCustomCursor, поскольку оно, похоже, ни на что не влияет в отладка консоли.
Я думаю, что правильное решение находится в разделеchart.legend.setOptions, но я не могу найти правильный синтаксис.

Подробнее здесь: https://stackoverflow.com/questions/797 ... -js-legend