도구 설명 텍스트 내용을 여러 줄로 자동 줄 바꿈하려면 어떻게해야합니까?

Question

ChartJS 를 사용하여 차트를 생성하고 있습니다. 데이터 포인트 툴팁은 구성 옵션을 통해 콜백을 사용하여 생성됩니다.

tooltips: {
    position: 'average',
    mode: 'index',
    intersect: false,
    callbacks: {
        title: tooltipTitleCallback,
        label: tooltipLabelCallback
    }
},

콜백은 다양한 길이의 문자열을 반환합니다. 내 문제는 ChartJS가 텍스트를 여러 줄로 자동 줄 바꿈하는 방법을 제공하지 않는 것 같습니다 (Bootstrap 툴팁과 유사). 대신 한 줄에 맞지 않는 텍스트는 잘립니다.

콜백이 줄 바꿈으로 구분되는 문자열 배열 을 반환 하도록 허용합니다 . 현재 내가 생각할 수있는 유일한 해결 방법은 각 도구 설명의 길이를 측정하고 텍스트가 충분히 길면 (반응이 없거나 이상적이지 않은 경우) 배열로 분할하는 것입니다. 이 문제에 대한 간단한 해결책이 있다면 차라리 바퀴를 다시 만들지 않을 것입니다. 당신의 도움을 주셔서 감사합니다.

Answer 1

ChartJS 2.0을위한 솔루션입니다. HTML 툴팁을 작성하는 기능을 제공 할 수 있습니다 .

다음 은 사용자 정의 도구 설명 을 사용하는 몇 가지 예입니다 .

캔버스 툴팁을 끕니다.

enabled: false

툴팁 불투명도 상태를 사용하여 사용자 정의 툴팁을 표시하거나 숨 깁니다. hover이벤트가 트리거 되면 상태가 업데이트됩니다 .

우리 tooltipTitleCallback와 tooltipLabelCallback기능. 우리가 전달하는 매개 변수에 따라 수정해야합니다이 예제에서, 우리는 툴팁의 사용하고있는 dataPoints우리의 재산을 tooltipTitleCallback기능. 데이터 속성에서 사용할 수있는 항목은 사용 된 상호 작용 모드 에 따라 결정 됩니다.

다음 은 도구 설명 모델의 몇 가지 다른 속성입니다.

화면의 오른쪽 측면을 통해가는 툴팁을 방지하기 위해, 우리는 설정 right대신의 위치 속성을 left.

작업 예

const ctx = document.getElementById("myChart").getContext("2d");

const customTooltip = {
  mode: "index",
  enabled: false,
  custom: function(model) {
    const tooltip = document.getElementById("tooltip");

    if (model.opacity === 0) {
      tooltip.style.opacity = 0;
      return;
    }

    if (model.body) {
      const title = "<strong>" + tooltipTitleCallback(model.dataPoints) + "</strong>";
      const label =
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros non massa consequat, ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros non massa consequat, ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eros non massa consequat, ac.";

      tooltip.innerHTML = title + "<br />" + label;

      tooltip.style.left = "auto";
      tooltip.style.right = "auto";

      const pos = this._chart.canvas.getBoundingClientRect();

      if (model.xAlign === "left") {
        tooltip.style.left = pos.left + model.caretX + "px";
      } else {
        tooltip.style.right = pos.right - model.caretX + "px";
      }

      tooltip.style.top = -50 + pos.top + model.caretY + "px";
      tooltip.style.opacity = 1;
    }
  }
};

const myChart = new Chart(ctx, {
  type: "line",
  data: {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [{
      label: "My First dataset",
      backgroundColor: "rgb(255, 99, 132)",
      borderColor: "rgb(255, 99, 132)",
      data: [0, 10, 5, 2, 20, 30, 45],
      fill: false
    }]
  },
  options: {
    tooltips: customTooltip
  }
});

function tooltipTitleCallback(items) {
  if (items.length > 0) {
    const item = items[0];

    if (item.label) {
      return item.label;
    }

    return "No title";
  }
}

#tooltip {
  opacity: 0;
  position: absolute;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 3px;
  -webkit-transition: all 0.1s ease;
  transition: all 0.1s ease;
  pointer-events: none;
  padding: 4px;
  margin: 15px;
  font-family: 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: 13px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.min.js"></script>
<canvas id="myChart" width="400" height="200"></canvas>
<div id="tooltip"></div>

Codepen