Chart Js Chartjs-plugin-datasource-prometheus 更改数据集的颜色

Question

如果有人已经使用该插件在 Chart.js 上使用 Prometheus 数据源，则需要一些帮助。

我在更改数据集的颜色时遇到问题。

我能够完成的最好的事情就是为每个点定义一种颜色作为不同的颜色：

这是我的代码：

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,
                        findInBorderColorMap: function () {
                            return ['rgba(0, 0, 255, 1)', 'rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)'];
                        },
                        findInBackgroundColorMap: function () {
                            return ['rgba(0, 0, 255, 0.2)', 'rgba(255, 0, 0, 0.2)', 'rgba(0, 255, 0, 0.2)'];
                        },
                        findInLabelMap: function (seriesMetric) {
                            return seriesMetric.labels.job;
                        },
                        fill: true,
                    },
                },
            },
        });

不确定我这样做是否正确，也许我不理解文档。

提前谢谢您。

Answer 1

我认为问题是你返回的是一个字符串数组而不是单个字符串。

您可以这样声明颜色数组：

let colors = ['rgba(0, 0, 255, 1)', 'rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)'];

然后在你的插件配置中你应该告诉你想要在该系列中使用哪种颜色。

findInBorderColorMap: function (serie) {
     return colors.shift();
}