Charts chart.js标签和值重叠问题

悬停时，条形图中的tooptip（标签）和值重叠。我正在使用angular2将数据绑定到图表画布。这是我在执行下面的代码时得到的输出

下面是chart.js选项的代码

public ChartOptions: any = {
scaleShowVerticalLines: false,
responsive: true,
hover: {
  animationDuration: 0
},
tooltips: {
  headerFormat: '',
  custom: function (tooltip) {
    if (!tooltip) return;
    // disable displaying the color box;
    tooltip.displayColors = false;
    tooltip.titleFontSize = 0;
  },
  mode: 'label',
  callbacks: {

    title: function () {
    },
    label: function (tooltipItem, data) {
      return ["Year : " + tooltipItem.xLabel, "Return : " + tooltipItem.yLabel + '%'];
    }
  }
},
legend: { display: false },
animation: {
  duration: 0,
  onComplete: function () {
    var ctx = this.chart.ctx;

    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillStyle = "#fff";
    ctx.fontStyle = "bold";

    var maxBar = 0;

    this.data.datasets.forEach(dataset => {
      maxBar += Math.max.apply(null, dataset.data.map(Math.abs));
    });

    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;

        var y_pos = model.y + 18;
        //adjust negative values
        if (dataset.data[i] < 0) {
          y_pos = (model.y) - 2;
        }

        if (maxBar / Math.abs(dataset.data[i]) < 30) {

          var data = dataset.data[i];
          ctx.fillText((data == 0 || data == 0.0) ? "NA" : data + "%", model.x, y_pos);
        }
      }
    });
  }
},
scales: {
  xAxes: [{
    barPercentage: 0.7,
    ticks: {
      fontStyle: "bold",
      fontColor: "#000"
    },
    gridLines: {
      display: false
    }
  }],
  yAxes: [{
    ticks: {
      stepSize: 2,
      fontStyle: "bold",
      fontColor: "#000",
      callback: function (value, index) {
        return index % 2 === 0 ? (value + "%") : '';
      },
    },
    gridLines: {
      display: false
    },
    scaleLabel: {
      display: true,
    }
  }]
}  };

公共图表选项：任意={
ScaleShowVerticalline:错误，
回答：是的，
悬停：{
动画持续时间：0
},
工具提示：{
总部：''，
自定义：函数（工具提示）{
如果（！工具提示）返回；
//禁用显示颜色框；
tooltip.displayColor=false；
tooltip.titleFontSize=0；
},
模式：“标签”，
回调：{
标题：功能（）{
},
标签：函数（工具提示项、数据）{
return[“年：”+tooltipItem.xLabel，“返回：”+tooltipItem.yLabel+'%'”；
}
}
},
图例：{display:false}，
动画：{
持续时间：0，
onComplete:函数（）{
var ctx=this.chart.ctx；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
ctx.fillStyle=“#fff”；
ctx.fontStyle=“bold”；
var-maxBar=0；
this.data.datasets.forEach（数据集=>{
maxBar+=Math.max.apply（null，dataset.data.map（Math.abs））；
});
this.data.datasets.forEach（函数（数据集）{
对于（var i=0；i

此

ChartOptions

在画布中用作

[options]=“ChartOptions”

。

---

帮我解决这个问题。提前谢谢

我的问题没有完美的解决方法。但我有一些自定义工具提示作为修复

tooltips: {
  enabled: false,
  custom: function (tooltipModel) {
    // Tooltip Element
    var tooltipEl = document.getElementById('chartjs-tooltip');
    // Create element on first render
    if (!tooltipEl) {
      tooltipEl = document.createElement('div');
      tooltipEl.id = 'chartjs-tooltip';
      tooltipEl.innerHTML = "<table></table>";
      document.body.appendChild(tooltipEl);
    }

    // Hide if no tooltip
    if (tooltipModel.opacity === 0) {
      tooltipEl.style.opacity = '0';
      return;
    }

    // Set caret Position
    tooltipEl.classList.remove('above', 'below', 'no-transform');
    if (tooltipModel.yAlign) {
      tooltipEl.classList.add(tooltipModel.yAlign);
    } else {
      tooltipEl.classList.add('no-transform');
    }

    // Set Text
    if (tooltipModel.body) {
      let dataPoints = tooltipModel.dataPoints || [];

      let index = dataPoints[0].index;

      var innerHtml = '<thead>';

      innerHtml += '<tr><th class="text-left">Data to show</th><th >';

      innerHtml += '</thead><tbody></tbody>';
      var tableRoot = tooltipEl.querySelector('table');
      tableRoot.innerHTML = innerHtml;
    }

    var position = this._chart.canvas.getBoundingClientRect();

    // Display, position
    tooltipEl.style.opacity = '1';
    tooltipEl.style.minWidth = position.width * 0.4 + 'px';
    let middle = (position.left + position.right) / 2;
    tooltipEl.style.left = middle + 'px';
    tooltipEl.style.top = position.top + pageYOffset - 35 + 'px';

  }
},

工具提示：{
启用：false，
自定义：函数（ToolTimpodel）{
//工具提示元素
var tooltipEl=document.getElementById（'chartjs-tooltip'）；
//在第一次渲染时创建元素
如果（！工具管）{
tooltipEl=document.createElement（'div'）；
tooltipEl.id='chartjs tooltip'；
tooltipEl.innerHTML=“”；
document.body.appendChild（工具管道）；
}
//如果没有工具提示，则隐藏
如果（ToolTimpodel.opacity==0）{
tooltipEl.style.opacity='0'；
返回；
}
//设置插入符号位置
移除（'Upper'、'Down'、'no transform'）；
如果（ToolTimpodel.yAlign）{
添加（tooltipModel.yAlign）；
}否则{
tooltipEl.classList.add（'no-transform'）；
}
//设置文本
如果（ToolTimpodel.body）{
设dataPoints=tooltipModel.dataPoints | |[]；
让index=dataPoints[0]。index；
var innerHtml=''；
innerHtml+='要显示的数据'；
innerHtml+=''；
var tableRoot=tooltipEl.querySelector（'table'）；
tableRoot.innerHTML=innerHTML；
}
var position=this.\u chart.canvas.getBoundingClientRect（）；
//显示器、位置
tooltipEl.style.opacity='1'；
tooltipEl.style.minWidth=position.width*0.4+'px'；
让中间=（position.left+position.right）/2；
tooltipEl.style.left=中间+px'；
tooltipEl.style.top=position.top+pageYOffset-35+‘px’；
}
},

我的结果呢