#lightningchart
Вопрос:
Я наткнулся на тепловые карты в lightning chart , я просто хочу знать, возможно ли это.
Пожалуйста , проверьте изображение выше, у меня есть линейные ряды с одной осью.. и я хочу, чтобы эти цветные полосы были выше линейного ряда с непрозрачностью.
Например
если я добавлю значение в тепловые карты от 0 до 100 , оно должно автоматически отображаться оранжевым.. от 100 до 200 оно должно отображаться зеленым и так далее.
Ответ №1:
Можно сделать, но это не должно быть очень практичным вариантом использования тепловых карт.
Фон или полосы с палитрой/градиентом должны давать более приятные результаты.
Вот фрагмент, который выглядит как ваша фотография (без линейного ряда), а также добавляет одну полосу, чтобы вы могли видеть, как они ведут себя немного по-другому.
Прозрачность может быть добавлена после R,G,B.
const {
lightningChart,
LUT,
PalettedFill,
ColorRGBA,
emptyLine,
SolidFill,
AxisScrollStrategies,
} = lcjs
const chart = lightningChart().ChartXY()
const line = chart.addLineSeries()
const heatmap = chart.addHeatmapScrollingGridSeries({
scrollDimension: 'columns',
resolution: 1,
step: {
x: 1,
y: 1,
},
})
const transparency = 100
heatmap
.setFillStyle(new PalettedFill({
lut: new LUT({
steps: [
{value: 0, color: ColorRGBA(255,127,39, transparency)},
{value: 1, color: ColorRGBA(181,230,29, transparency)},
{value: 2, color: ColorRGBA(112,146,190, transparency)},
{value: 3, color: ColorRGBA(255,242,0, transparency)},
{value: 4, color: ColorRGBA(237,28,36, transparency)}
]
})
}))
.setPixelInterpolationMode('disabled')
.setWireframeStyle(emptyLine)
chart.getDefaultAxisX().setInterval(-10, 0).setScrollStrategy(AxisScrollStrategies.progressive)
line.add({x:0,y:0})
let x = 1
setInterval(() => {
const y = Math.random()
const p = {x, y}
line.add(p)
const iColor = x % 5
heatmap.addIntensityValues([[iColor]])
x = 1
}, 1000)
<script src="http://unpkg.com/@arction/lcjs@3.1.0/dist/lcjs.iife.js"></script>
Комментарии:
1. Привет , нет функции добавления ? моя диаграмма представляет собой динамическую линейную диаграмму в реальном времени , я хочу создать этот фон на лету на основе значения оси x линейной диаграммы. Для этого какую серию вы рекомендуете ?
2. Итак, на линейном графике данные поступают постоянно и прокручиваются по оси x? Как насчет цветов фона, они движутся вместе с линией или остаются неподвижными?
3. цвет фона перемещается вместе с линиями.. Я думаю, что вертикальные полосы мне подойдут.. что ты на это скажешь ? есть какой-нибудь другой способ, кроме групп ??
4. Я подумал о addHeatmapGridSeries , потому что, только добавив значения в серию, он автоматически создаст фон для меня, но для полос мне нужно продолжать создавать 100 полос с разными цветами.
5. Это не повседневный случай использования, поэтому у меня нет твердых мнений, хе-хе. Я обновил фрагмент кода, чтобы использовать серию таблиц прокрутки тепловой карты, которая позволяет добавлять значения в виде прокрутки. Если вы хотите, чтобы это было похоже на ваш пример изображения, где цвет меняется только каждые 10 значений строк, то вам следует установить шаг x тепловой карты равным 10 и добавлять значение интенсивности только для каждых 10 значений строк. Как тебе это?