在 ChartJS 中编辑工具提示

Question

我在自定义 chartjs 工具提示时遇到了一些问题。

var animationComplete = function () {
        var self = this;

        Chart.helpers.each(self.datasets[0].points, function (point, index) {
            Chart.helpers.each(self.datasets, function (dataset) {
                new Chart.MultiTooltip({
                    x: point.x,
                    y: dataset.points[index].y,
                    xPadding: self.options.tooltipXPadding,
                    yPadding: self.options.tooltipYPadding,
                    xOffset: self.options.tooltipXOffset,
                    //yOffset: self.options.tooltipYOffset,
                    fillColor: self.options.tooltipFillColor,
                    textColor: self.options.tooltipFontColor,
                    fontFamily: self.options.tooltipFontFamily,
                    fontStyle: self.options.tooltipFontStyle,
                    fontSize: self.options.tooltipFontSize,
                    titleTextColor: self.options.tooltipTitleFontColor,
                    titleFontFamily: self.options.tooltipTitleFontFamily,
                    titleFontStyle: self.options.tooltipTitleFontStyle,
                    titleFontSize: self.options.tooltipTitleFontSize,
                    cornerRadius: self.options.tooltipCornerRadius,
                    labels: [dataset.points[index].value],
                    legendColors: [{
                        fill: dataset.strokeColor,
                        stroke: dataset.strokeColor
                    }],
                    legendColorBackground: self.options.multiTooltipKeyBackground,
                    //title: point.label,
                    //title: false,
                    title: '',
                    chart: self.chart,
                    ctx: self.chart.ctx,
                    custom: self.options.customTooltips
                }).draw()
            });

            self.chart.ctx.font = Chart.helpers.fontString(self.fontSize, self.fontStyle, self.fontFamily)
            self.chart.ctx.textAlign = 'center';
            self.chart.ctx.textBaseline = "middle";
            self.chart.ctx.fillStyle = "#666";
            self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint);
    });
};

    var ctx = document.getElementById("weeksChart").getContext("2d");
    window.weeksChart = new Chart(ctx).Line(dataWeeks, {
        responsive: true,
        pointDot: true,
        datasetStrokeWidth: 0.5,
        bezierCurve : false,
        scaleSteps: 2,
        scaleLabel: "<%=value + '°'%>",
        //tooltipTemplate: "<%= value %>",
        tooltipTemplate: "<%= value + '°'%>",
        tooltipFillColor: "transparent",
        tooltipFontColor: "#000",
        tooltipFontSize: 14,
        tooltipXOffset: -10,
        //tooltipYOffset: -100,
        //tooltipYOffset: 100,
        tooltipYPadding: 0,
        showTooltips: true,
        scaleShowLabels: false,
        scaleFontColor: "transparent",
        onAnimationComplete: function () {
                animationComplete.apply(this)
        },
        tooltipEvents: []
    });

是否可以：

删除彩色方块？;
更改数字的字体颜色，使蓝色行数字为蓝色字体，红色行数字为红色？;
要提高 Y-axis 上的数字？（我曾尝试 add/change 我的 Fiddle 中的第 30、78、79 行，但没有任何效果）；
从工具提示中删除标题？（现在对我有用的是在第 49 行设置 title: '',。第 48 行不起作用）；
在数字后面加°符号？（我试着这样做 -> tooltipTemplate: "<%= value + '°'%>"，但它不起作用...）

这是我的Fiddle

Answer 1

1.to remove colored squares?;

2.to change fontColor of numbers, so on blue line numbers will have blue font, and on red line numbers will be red?;

4.to remove Titles from tooltips? (everything what is works for me right now is to set title: '', on line 49. Line 48 doesn't work);

5.to add ° symbol right after number? (I tried to make like this -> tooltipTemplate: "<%= value + '°'%>", but it doesn't work...)

所有这些都可以通过从 MultiTooltip 构造函数切换到（单系列）Tooltip 构造函数来完成（单系列工具提示没有彩色方块或title) 并调整选项 textColor 和 text 像这样

new Chart.Tooltip({
    x: point.x,
    y: dataset.points[index].y,
    xPadding: self.options.tooltipXPadding,
    yPadding: self.options.tooltipYPadding,
    fillColor: self.options.tooltipFillColor,
    textColor: dataset.strokeColor,
    fontFamily: self.options.tooltipFontFamily,
    fontStyle: self.options.tooltipFontStyle,
    fontSize: self.options.tooltipFontSize,
    caretHeight: self.options.tooltipCaretSize,
    cornerRadius: self.options.tooltipCornerRadius,
    cornerRadius: self.options.tooltipCornerRadius,
    text: dataset.points[index].value + '°',
    chart: self.chart,
    custom: self.options.customTooltips
}).draw()

3.to move numbers higher on Y-axis? (i'd tried to add/change lines 30,78,79 in my Fiddle, but nothing works);

我假设你的意思是顶部的 x 轴标签（我在你的 fiddle 上看不到第 78 行和第 79 行，而第 30 行似乎无关）。

如果是细微的变化，您可以通过调整写出标签的行中的 y 参数轻松完成。

self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 2);

但是，如果您想将其进一步向上移动，则需要在图表顶部制作一些 space，否则您的标签顶部将被剪掉。您可以通过扩展图表并覆盖绘图函数中的 scale.startPoint 来实现。

所以

Chart.types.Line.extend({
    name: "LineAlt",
    draw: function (data) {
        this.scale.startPoint = 25;
        Chart.types.Line.prototype.draw.apply(this, arguments);
    }
});

然后使用 LineAlt 代替 Line

window.weeksChart = new Chart(ctx).LineAlt(dataWeeks, {

将允许你做

self.chart.ctx.fillText(point.label, point.x, self.scale.startPoint - 12);

不剪掉标签

Fiddle - http://jsfiddle.net/kphmkL0e/

在 ChartJS 中编辑工具提示

Edit tooltips in ChartJS

javascript

chart.js