工具提示覆蓋在圖表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

回答

相關問題