javascript - 如何使用图像作为 chart.js 图例的键

Question

我已经建立了一个内部 KPI，目前使用推销员的名字作为图例键，但是我需要使用他们的自定义图标作为具有各自颜色边框的键。

我尝试编辑 chart.js options: legend field per the documentation，但无济于事（请参阅下面的当前选项和数据集配置。）

datasets: [
                    {
                        label: "Salesperson1",
                        data:totalPointsSalesperson1,
                        fill:  false,
                        borderColor: 'blue',

                    },
                    {
                        label: "Salesperson2 ",
                        data:totalPointsSalesperson2,
                        fill:  false,
                        borderColor: 'red',
                    },
                    {
                        label: "Salesperson3",
                        data:totalPointsSalesperson3,
                        fill:  false,
                        borderColor: 'green',
                    },
                    {
                        label: "Salesperson4",
                        data:totalPointsSalesperson4,
                        fill:  false,
                        borderColor: 'yellow',
                    }
        ],
    },
    options: {

        legend:{
            position: 'right',
            display: true,
            labels: {
            padding: 150,
            },
        },

似乎改变图表上的点样式很容易，但修改图例似乎相当棘手。也许我错过了一些明显的东西？还有一点需要注意，因为这是一个折线图。

标签： javascriptchart.js

Answer 1

决定放弃 Chart.js 图例配置并决定自己编写，我将关闭这个问题。