使用 Chart.js 在折线图上自定义工具提示

Question

所以我使用 Chart.js 创建了一个折线图，但我想为每个单独的工具提示添加一些自定义文本。

我希望能够将“玩家 2：29”文本更改为“自定义名称：29”，将“玩家 2：44”更改为“不同自定义名称：29”。

我将一个 json 对象传递给我获取点值的视图（工作正常），但 json 对象也有一个字符串值，我想用它来代替“自定义名称”。

关于场景的更多细节：

• 绿线代表一支队伍，红线代表另一支队伍。
• 一个团队有四名玩家
• 图表上的每个点都代表一个球员得分，这就是为什么我希望能够在工具提示中显示人员姓名及其得分。
• 每个工具提示将包含 2 个不同的玩家姓名和得分。

有什么办法吗？

感谢您花时间阅读本文。

Answer 1

每个数据集的自定义标签

您可以使用自定义标签对象来做到这一点。

---

预览

---

脚本

function TeamPlayerLabel(label, team1Label, team2Label) {
    this.label = label;
    this["Team 1"] = team1Label;
    this["Team 2"] = team2Label;
}
TeamPlayerLabel.prototype.toString = function () {
    return this.label;
}

var data = {
    labels: [
        new TeamPlayerLabel("Player 1", "John Red", "John Green"),
        new TeamPlayerLabel("Player 2", "Mark Red", "Mark Green"),
        new TeamPlayerLabel("Player 3", "Jane Red", "Jane Green"),
        new TeamPlayerLabel("Player 4", "Jill Red", "Jill Green"),
    ],
    datasets: [
        {
            label: "Team 1",
            ...
        },
        {
            label: "Team 2",
            ...
        }
    ]
};

然后

new Chart(ctx).Line(data, {
    multiTooltipTemplate: function (self) {
        return self.label[self.datasetLabel] + ': ' + self.value;
    }
});

---

小提琴 - https://jsfiddle.net/htq3kgay/