如何在 LightningChartJS 中直接给 Heatmap 系列添加颜色？

Question

我使用 IntensityGrid 浏览了示例热图。它展示了如何将数据添加到系列以创建热图。但我想直接从颜色创建热图。我确实看到有一个选项可以使用

在 LightningChartJS 中实现此目的

heatmap.invalidateColorsOnly( Matrix<Color> )

但我没有找到任何关于如何执行此操作的参考。有人可以帮我吗？

Answer 1

Heatmap Mesh example from the enter link description hereLightningChart JS 交互示例展示了如何使用 invalidateColorsOnlyAPI。该示例使用强度系列的网格类型，但 API 使用与网格相同。

invalidateColorsOnly API 要求使用 IndividualPointFill 作为填充样式，因为它可以做任何事情。

heatmap.setFillStyle( new IndividualPointFill() )
heatmap.invalidateColorsOnly( ( row, column ) => ColorHSV( Math.random() * 70, 0.8 ) )

invalidateColorsOnly 可以将回调函数作为参数，您可以使用该函数根据行和列为每个点计算新颜色，或者将应用于每个点的完整颜色矩阵。如果使用颜色矩阵，则颜色矩阵的大小应与热图的分辨率相同。

下面您可以看到针对网格类型热图修改的 LightningChart JS 交互示例中的热图网格示例。

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    IntensitySeriesTypes,
    IndividualPointFill,
    ColorHSV
} = lcjs

// Helper function to help turn degrees to radians
function degToRad( angle ) {
    return angle * Math.PI / 180
}

// Resolution of each row/column, specifying how many cells
// are in the heatmap.
const resolution = 20

// Create a new ChartXY.
const chart = lightningChart().ChartXY()
chart.setTitle('Heatmap using IntensityGrid')

// Add a heatmap to the chart, as a IntensityGrid
const heatmap = chart
    .addHeatmapSeries( {
        rows: resolution,
        columns: resolution,
        start: { x: 10, y: 10 },
        end: { x: 1990, y: 1990 },
        pixelate: true,
        type: IntensitySeriesTypes.Grid
    } )
    // Add colors and invalidate the Series based on the colors assigned.
    .invalidateColorsOnly( ( row, column ) => ColorHSV( Math.random() * 70, 0.8 ) )
    // Use IndividualPointFill to apply individual color per cell.
    .setFillStyle( new IndividualPointFill() )

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

如何在 LightningChartJS 中直接给 Heatmap 系列添加颜色？

How to directly add color to Heatmap series in LightningChartJS?

javascript

charts

matrix

heatmap

lightningchart