Блог

Главная - Вопросы по программированию - Наложения тепловых карт на линейный график

Наложения тепловых карт на линейный график

#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 значений строк. Как тебе это?

Метки: