0

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

heatmap.invalidateColorsOnly( Matrix<Color> )

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

4

1 回答 1

0

此处LightningChart JS 交互示例中的输入链接描述中的Heatmap Mesh 示例展示了如何使用API。该示例使用 Mesh 类型的 Intensity Series，但 API 使用与 Grid 相同。invalidateColorsOnly

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>

于 2020-05-20T08:32:25.780 回答