在ChartJS中编辑工具提示 [英] Edit tooltips in ChartJS

问题描述

我无法自定义chartjs工具提示。

I have some troubles with customization of chartjs tooltips.

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: []
    });

是否可能：

1. 要删除彩色正方形吗？;


2. 要更改数字的fontColor，所以在蓝色的行号上将具有蓝色字体，在红色的行号上将变为红色？ li>
   
3. 要在Y轴上移动数字吗？ （我曾尝试在我的小提琴中添加/更改第30,78,79行，但是没有用）；


4. 要从工具提示中删除标题？ （现在对我有用的所有方法都是在第49行上设置 title：''，。第48行不起作用）；


5. 在数字后立即添加°符号？ （我试图这样做-> tooltipTemplate：<％= value +'°'％> ，但这不起作用...）

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

这是我的小提琴

推荐答案

1。删除彩色方块？;

1.to remove colored squares?;

2。更改数字的fontColor，所以在蓝色的行号上将显示蓝色字体，在红色的行号上将显示红色？

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

4.要从工具提示中删除标题？ （现在对我有用的所有方法都是在第49行上设置标题：。第48行不起作用）；

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。添加°符号在数字之后？ （我试图使它像这样-> tooltipTemplate：<％= value +'°'％>，但是它不起作用...）

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

所有这些都可以通过从MultiTooltip构造函数切换到一个（单个系列） Tooltip 构造函数（单个系列的工具提示没有彩色正方形或标题），并像这样调整选项 textColor 和 text

All of these can be done by just switching from the MultiTooltip constructor to a (single series) Tooltip constructor (the single series tooltip doesn't have a colored square or a title) and adjusting the options textColor and text like so

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。在Y轴上移动数字？ （我曾尝试在我的小提琴中添加/更改第30,78,79行，但没有用）；

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轴标签（我看不到小提琴上的第78和79行，而第30行似乎无关）。

I assume you mean the x axis labels that are on the top (I couldn't see lines 78 and 79 on your fiddle, and 30 seemed unrelated).

如果稍有变化，可以通过调整写出标签的行中的y参数来轻松实现。

If it's a slight change you could do it easily by adjusting the y parameter in the line that writes out the label.

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

但是，如果您想将其向上移动很多，则需要在图表顶部或标签顶部将被剪除。您可以通过在绘图函数中扩展图表并覆盖scale.startPoint来实现此目的。

However, if you want to move it up a lot further, you need to make some space on the top of the chart or the top of your labels will be clipped off. You can do this by extending the chart and overriding scale.startPoint in the draw function.

所以

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

，然后使用LineAlt代替Line

and then using LineAlt instead of Line

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

允许您做

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

而不会剪掉标签

小提琴- http://jsfiddle.net/kphmkL0e/

这篇关于在ChartJS中编辑工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！