>

ChartJS라이브러리를 사용하여 차트를 만들고 있습니다. 툴팁에서 내가 만든 데이터 세트의 데이터 값을 보여줍니다. 차트 유형이도넛인 경우 작동합니다. 그렇지 않으면 차트 나막대또는가로 막대차트에서 작동하지 않습니다.

내가 무엇을하든 레이블이있는 데이터가 표시됩니다.

툴팁에 데이터가 포함 된 JSFiddle of Donut Chart 작업.

<시간>

툴팁에 레이블 + 데이터가있는 막대 차트의 JSFiddle 작업.

막 대형 차트의 툴팁에 표시된 레이블을 제거하기 만하면됩니다.

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'bar',
  data: {
    labels: [
      "Men",
      "Women",
      "Unknown"
    ],
    datasets: [{
        label: 'Sweden',
        data: [60, 40, 20],
        backgroundColor: [
          'rgba(158, 216, 202, 0.75)',
          'rgba(255, 150, 162, 0.75)',
          'rgba(160, 160, 160, 0.75)'
        ]
      },
      {
        label: 'Netherlands',
        data: [40, 70, 10],
        backgroundColor: [
          'rgba(158, 216, 202, 0.5)',
          'rgba(255, 150, 162, 0.5)',
          'rgba(160, 160, 160, 0.5)'
        ]
      },
      {
        data: [33, 33, 34],
        backgroundColor: [
          'rgba(158, 216, 202, 0.25)',
          'rgba(255, 150, 162, 0.25)',
          'rgba(160, 160, 160, 0.25)'
        ]
      }
    ]
  },
  options: {
    tooltips: {
      callbacks: {
        label: function(tooltipItem, data) {
          return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
        }
      }
    }
  }
});

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

  • 답변 # 1

    그냥 title 를 사용  빈 값을 가진 옵션. 이와 같이 :

    callbacks: {
            title: function(tooltipItems, data) {
              return '';
            },
            label: function(tooltipItem, data) {
              var datasetLabel = '';
              var label = data.labels[tooltipItem.index];
              return data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
            }
          }
    
    

    업데이트 된 jsfiddle 참조

관련 자료

  • 이전 reactjs - React에서 고정 간격 후에 배열에서 항목 렌더링
  • 다음 javascript - AJAX POST 후 뷰를 다시로드하는 방법