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

Question

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

我希望能够改变＆＃34;玩家2：29＆＃34;文字到＆＃34;自定义名称：29＆＃34; ＆＃34; Player 2:44＆＃34;到＆＃34;不同的自定义名称：29＆＃34;。

我将一个json对象传递给视图，这是我得到点值的地方（工作正常），但是json对象也有一个字符串值，这是我想要用来代替＆＃34; Custom名称＆＃34;

有关方案的更多细节：

• 绿线表示一个团队，红线表示另一个团队。
• 团队中有四名球员
• 图表上的每个点代表玩家得分，这就是为什么我希望能够在工具提示中显示人名及其得分。
• 每个工具提示将包含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/