chart.js 标签和值重叠问题

Question

条形图toptip（标签）和条内的值在悬停时重叠。我正在使用 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,
    }
  }]
}  };

这个ChartOptions 在画布中用作[options]="ChartOptions"。 帮我解决问题。提前致谢。

Answer 1

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

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';

  }
},

我的结果