Chart.js Prometheus数据源插件：修改数据集颜色求助

你当前的问题是因为findInBorderColorMap和findInBackgroundColorMap返回了颜色数组，插件会将数组中的颜色逐个分配给每个数据点，导致同一系列内颜色不一致。要实现整个数据集（单条曲线）统一颜色，需要让这两个函数针对每个Prometheus返回的series返回单一颜色，而非数组。

修改后的代码示例 #

var myChart = new Chart(ctx, {
    type: 'line',
    plugins: [ChartDatasourcePrometheusPlugin],
    options: {
        plugins: {
            'datasource-prometheus': {
                prometheus: {
                    endpoint: "https://xxx.xx",
                    baseURL: "/api/v1",
                },
                query: 'ledger_blockchain_height',
                timeRange: {
                    type: 'relative',
                    start: -1 * 60 * 60 * 1000,
                    end: 0, // agora
                },
                stacked: true,
                // 根据series的job标签返回单一边框颜色
                findInBorderColorMap: function (seriesMetric) {
                    switch(seriesMetric.labels.job) {
                        case '你的第一个job名':
                            return 'rgba(0, 0, 255, 1)';
                        case '你的第二个job名':
                            return 'rgba(255, 0, 0, 1)';
                        case '你的第三个job名':
                            return 'rgba(0, 255, 0, 1)';
                        default:
                            return '#666666'; // 默认颜色
                    }
                },
                // 对应返回单一填充颜色
                findInBackgroundColorMap: function (seriesMetric) {
                    switch(seriesMetric.labels.job) {
                        case '你的第一个job名':
                            return 'rgba(0, 0, 255, 0.2)';
                        case '你的第二个job名':
                            return 'rgba(255, 0, 0, 0.2)';
                        case '你的第三个job名':
                            return 'rgba(0, 255, 0, 0.2)';
                        default:
                            return '#cccccc'; // 默认填充色
                    }
                },
                findInLabelMap: function (seriesMetric) {
                    return seriesMetric.labels.job;
                },
                fill: true,
            },
        },
    },
});

关键说明 #

• 这两个回调函数的参数seriesMetric包含了当前Prometheus返回的单条时间序列的所有元数据（比如labels、metric名等），你可以根据这些信息给不同的series分配固定颜色。
• 返回单一颜色值后，该series下的所有数据点都会统一使用这个颜色，不会再逐个点分配不同颜色。

内容的提问来源于stack exchange，提问作者Alexandre Torres