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

查看：13
本文介绍了在 ChartJS 中编辑工具提示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我在自定义 chartjs 工具提示时遇到了一些麻烦.

var animationComplete = function () {变种自我=这个；Chart.helpers.each(self.datasets[0].points, function (point, index) {Chart.helpers.each(self.datasets, function (dataset) {新的 Chart.MultiTooltip({x:点.x，y: dataset.points[index].y,xPadding:self.options.tooltipXPadding，yPadding:self.options.tooltipYPadding，xOffset:self.options.tooltipXOffset，//yOffset: self.options.tooltipYOffset,填充颜​​色: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,角半径:self.options.tooltipCornerRadius，标签:[dataset.points[index].value]，图例颜色:[{填充:dataset.strokeColor，中风:dataset.strokeColor}],legendColorBackground:self.options.multiTooltipKeyBackground，//标题:point.label,//标题:假，标题: ''，图表:self.chart，ctx:self.chart.ctx，自定义:self.options.customTooltips}).画()});self.chart.ctx.font = Chart.helpers.fontString(self.fontSize, self.fontStyle, self.fontFamily)self.chart.ctx.textAlign = 'center';self.chart.ctx.textBaseline = "中间";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, {响应式:真实，点点:是的，数据集StrokeWidth:0.5，贝塞尔曲线:假，规模步数:2，scaleLabel: "<%=value + '°'%>",//tooltipTemplate: "<%= value %>",tooltipTemplate: "<%= value + '°'%>",tooltipFillColor: "透明",tooltipFontColor: "#000",工具提示字体大小:14，工具提示XOffset:-10，//tooltipYOffset: -100,//tooltipYOffset: 100,tooltipYPadding: 0,显示工具提示:真，scaleShowLabels:假，scaleFontColor: "透明",onAnimationComplete: 函数 () {animationComplete.apply(this)},工具提示事件:[]});

有没有可能:

  1. 删除彩色方块?；
  2. 改变数字的字体颜色，这样蓝线的数字是蓝色的，红线的数字是红色的?;
  3. 在 Y 轴上移动数字?(我试图在我的 Fiddle 中添加/更改第 30、78、79 行，但没有任何效果)；
  4. 要从工具提示中删除标题?(现在对我有用的一切都是在第 49 行设置 title: '',.第 48 行不起作用)；
  5. 在数字后添加 ° 符号?(我尝试过这样 -> tooltipTemplate: "<%= value + '°'%>"，但它不起作用......)

这是我的小提琴

解决方案

1.去除彩色方块?;

2.改变数字的字体颜色，使蓝线数字为蓝色字体，红线数字为红色?;

4.从工具提示中删除标题?(现在对我有用的一切都是在第 49 行设置标题:''.第 48 行不起作用)；

5.在数字后添加°符号?(我尝试过这样 -> tooltipTemplate: "<%= value + '°'%>"，但它不起作用......)

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

new Chart.Tooltip({x:点.x，y: dataset.points[index].y,xPadding:self.options.tooltipXPadding，yPadding:self.options.tooltipYPadding，填充颜​​色:self.options.tooltipFillColor，textColor: dataset.strokeColor,fontFamily: self.options.tooltipFontFamily,fontStyle: self.options.tooltipFontStyle,fontSize: self.options.tooltipFontSize,caretHeight: self.options.tooltipCaretSize,角半径:self.options.tooltipCornerRadius，角半径:self.options.tooltipCornerRadius，文本:dataset.points[index].value + '°',图表:self.chart，自定义:self.options.customTooltips}).画()

<小时><块引用>

3.在Y轴上移动数字更高?(我试图在我的 Fiddle 中添加/更改第 30、78、79 行，但没有任何效果)；

我假设您指的是顶部的 x 轴标签(我在您的小提琴上看不到第 78 行和第 79 行，而第 30 行似乎无关).

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

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

但是，如果您想将其进一步向上移动，则需要在图表顶部留出一些空间，否则标签顶部会被剪掉.您可以通过扩展图表并覆盖绘图函数中的 scale.startPoint 来做到这一点.

所以

Chart.types.Line.extend({名称:LineAlt"，绘制:函数(数据){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);

不剪掉标签

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

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

Is it possible:

  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...)

Here is my Fiddle

解决方案

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...)

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

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).

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);

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.

So

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

and then using LineAlt instead of Line

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

will allow you to do 

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

without clipping off the label

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

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

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆