如何在闪电图JS中直接为热图系列添加颜色?

Question

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

heatmap.invalidateColorsOnly( Matrix<Color> )

但我没有找到任何关于如何做到这一点的参考。有人可以帮我吗？

Answer 1

此处输入链接描述中的热图网格示例LightningChart JS交互式示例显示了如何使用invalidateColorsOnlyAPI。该示例使用强度系列的网格类型，但网格的 API 使用相同。

invalidateColorsOnlyAPI 要求将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>