工具提示覆盖图表js中的文本

Question

我使用chart.js

创建了如下图表

上图中的文字如（Bare，Mounted）我在oncomplete函数中创建了这个

onComplete: function () {

    // render the value of the chart above the bar
    var ctx = this.chart.ctx;
    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, 'normal', Chart.defaults.global.defaultFontFamily);
    ctx.fillStyle = this.chart.config.options.defaultFontColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    this.data.datasets.forEach(function (dataset) {
        for (var i = 0; i < dataset.data.length; i++) {
            var model = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
            if(dataset._meta[0].controller.index==1){
                ctx.fillText(dataset.data[i], model.x-10, model.y+8);
                ctx.fillText('Mounted', model.x-25, model.y+38);
                ctx.fillText('360 (Available)', model.x-42, model.y-25);
            }else{
                ctx.fillText(dataset.data[i], 10, model.y+8);
                ctx.fillText('Bare', 12, model.y+38);
                ctx.fillText($scope.labels[i], 12, model.y-25);
            }

        }
    });
}}

但是这些值会在工具提示之上呈现。我怎么能避免这个？

Answer 1

您的问题是在动画结束时会调用onComplete。这就是onComplete应该起作用的方式。如果要绘制工具提示，则在绘制工具提示后将调用onComplete，因为绘制工具提示是动画的一部分。这就是你的文本被覆盖在其他一切之上的原因。你可以做的是创建（并注册）一个插件来绘制你的文本（抛弃onComplete方法）。看看docs about creating a plugin。您将不得不重写一个方法（找到要覆盖的方法，查看一些插件示例，还要注意如何使用easing），您应该只使用当前代码几点变化。