javascript - 工具提示覆盖图表 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)，您应该能够在其中使用当前代码只需进行一些更改。