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

Question

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

heatmap.invalidateColorsOnly( Matrix<Color> )

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

Answer 1

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

invalidateColorsOnly API 要求使用IndividualPointFill作为填充样式，因为它可以执行任何操作。

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

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

您可以在下面看到针对网格类型热图修改的 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>