heatmapGridSeries 叠加在折线图上

Question

我在闪电图中遇到了heatmapGridSeries，我只是想知道这是否可能。

请检查上图，我有一个轴的线系列..我想要这个色带在不透明度的线系列上方。

例如

如果我将 heatmapGridSeries 的值从 0 增加到 100，它应该自动显示橙色。从 100 到 200 它应该显示绿色等等。

Answer 1

可以做到，但不应该是热图的一个非常实际的用例。

Paletted/gradient系列背景或乐队应该会给出更好的结果。

这是一个看起来像你的图片的片段（没有线系列），并且还添加了一个 Band 以便你可以看到它们的行为有何不同。

可以在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>

heatmapGridSeries 叠加在折线图上

heatmapGridSeries overlay over line chart

lightningchart