подсказке перекрывая текст в диаграмме JS

Question

Я создал график, как показано ниже, используя chart.js

На приведенном выше графике тексты, такие как (Bare, смонтированный) Я создает это в 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), где вы сможете использовать свой текущий код всего несколькими изменениями.