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

是否有可能：

删除彩色方块？;
更改数字的fontColor，所以蓝线上的数字会有蓝色字体，红线上的数字会是红色的吗？
在Y轴上移动数字更高？（我试图在我的小提琴中添加/更改30,78,79行，但没有任何作用）;
从工具提示中删除标题？（现在对我有用的一切就是在第49行设置title: '',。第48行不起作用）;
在数字后面添加°符号？（我试着这样做 - ＆gt; tooltipTemplate: "<%= value + '°'%>"，但它不起作用......）

这是我的Fiddle

Answer 1

1.删除彩色方块？;

2.更改数字的fontColor，因此蓝线数字将为蓝色字体，红线数字为红色？

4.从工具提示中删除标题？（现在对我有用的一切就是设置标题：''，在第49行。第48行不起作用）;

5.在数字后面添加°符号？（我试着这样做 - ＆gt; tooltipTemplate：“＆lt;％= value +'°'％＆gt;”，但它不起作用......）

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

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行，但没有任何作用）;

我认为你的意思是顶部的x轴标签（我看不到你的小提琴上的第78和79行，而且30看起来不相关）。

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

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

但是，如果您想进一步向上移动，则需要在图表顶部留出一些空间，否则标签的顶部将被剪掉。您可以通过在绘图函数中扩展图表并覆盖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);

没有剪掉标签

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

在ChartJS中编辑工具提示

1 个答案: