工具提示覆盖在图表JS

文本我创建像一个图表下方使用chart.js工具提示覆盖在图表JS

上面曲线图中的文本等（裸露的，安装）我创建此在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); 
      } 

     } 
    }); 
}}

但是这些值呈现在工具提示上方。我怎样才能避免这？

来源

2016-12-30 Arunkumar

是否需要工具提示底部的值（20,40,45）？ –

否请参阅图片。我不想与文本重叠工具提示（已安装） – Arunkumar

然后，你可以去CSS边。为99999提示z-index。如果安装了z-index，只需将其更改为低或将其删除即可。 –

您的问题是onComplete将在动画结束时被调用。这就是onComplete应该如何工作。如果有工具提示要绘制，则在绘制工具提示后将调用onComplete，因为绘制工具提示是动画的一部分。这就是你的文字被绘制在一切之上的原因。你可以做的是创建（注册）一个插件来绘制你的文本（沟通onComplete方法）。看看docs about creating a plugin。你只需要重写一个方法（找出哪个方法可以覆盖，看一些插件的例子，同时注意easing的使用方法），你应该只需要做一些改动就可以使用你当前的代码。

来源

2016-12-30 14:58:11 xnakos

有助于理解问题的很好答案。对于我的情况，我现在更改为'beforeDraw'和工具提示“在这些文本之上” – tucq88

工具提示覆盖在图表JS

回答

相关问题