Question

有没有一种方法可以实现多行提示？

现在我的代码：

 myChart = new Chart(this.ctx, {
    type: 'line',
    data: {
      labels: dates,
      datasets: [{
        yAxisID: 'first',
        label: 'Referred Users',
        borderColor: '#F17E5D',
        pointBackgroundColor: '#F17E5D',
        backgroundColor: '#F17E5D',
        pointRadius: 3,
        lineTension: 0,
        fill: false,
        data: visitors
      }, {
        yAxisID: 'second',
        label: 'Posts',
        borderColor: '#4FCCF1',
        pointBackgroundColor: '#4FCCF1',
        backgroundColor: '#4FCCF1',
        pointRadius: 3,
        lineTension: 0,
        fill: false,
        data: posts
      }]
    },
    options: {
      legend: {
        display: true,

      },
      tooltips: {
        enabled: true,
        mode: 'index',
        tooltipFontSize: 10,
        callbacks:{
          label: function (tooltipItem) {
            let object;
            if(tooltipItem.datasetIndex === 0){
              object = visitors[tooltipItem.index]
            }
            if(tooltipItem.datasetIndex === 1){
              for(var i = 0; i < objectBetweenDates.length; i++){
                if(objectBetweenDates[i].timestamp === dates[tooltipItem.index]){
                  object objectBetweenDates[i].comment;
                }
              }
            }

            return object;
          }
        }
      },
      scales: {
        yAxes: [{
          id: 'first',
          position: 'left',
          ticks: {
            fontColor: '#9f9f9f',
            beginAtZero: true,

          },
          gridLines: {
            borderDash: [8, 5],
            color: '#9f9f9f',
          }
        }, {
          id: 'second',
          position: 'right',
          ticks: {
            fontColor: '#9f9f9f',
            beginAtZero: true,
            max: Math.max(...posts)+1,
            stepSize: 1
          },
          gridLines: {
            borderDash: [8, 5],
            color: '#9f9f9f',
          }
        }],
        xAxes: [{
          barPercentage: 1.6,
          gridLines: {
            borderDash: [8, 5],
            color: '#9f9f9f',
            zeroLineColor: 'transparent'
          },
          ticks: {
            padding: 20,
            fontColor: '#9f9f9f'
          }
        }]
      },
    }
  });

});

结果如下：

如您所见，它是一个很长的工具提示。文本的一部分被剪掉。我希望文本能在多行中很好地完全显示。但是根据文档，似乎没有官方的方法来完成此操作。

所以希望有人能找到一种解决方法。

我曾尝试拆分文本，但不幸的是，这只会创建多个标签，而不会产生结果。

我需要一个带有一个标签的文本，并且由于文本大小，文本被截断了。

如果您除此之外还需要其他任何信息。毫不犹豫地问。

Chart.js-如何在工具提示中实现多行

0 个答案: