ChartJS 수평 차트 디스플레이 전설

Question

나는 ChartJS 꽤 새로운 그리고 난 가로 막대 차트에 봉착 : 대한

var ctx = document.getElementById("mybarChart"); 

    ctx.height = 300; 

    var mybarChart = new Chart(ctx, { 
     type: 'horizontalBar', 
     responsive: true, 
     data: data, 
     options: { 
      legend: { 
       display: false 
      }, 
      scales: { 
       yAxes: [{ 
        display: false, 
        ticks: { 
         beginAtZero: true 
        }, 
        gridLines: { 
         color: "rgba(0, 0, 0, 0)", 
        } 
       }], 
       xAxes: [{ 
        display: false, 
        gridLines: { 
         color: "rgba(0, 0, 0, 0)", 
        }, 
        barPercentage: 0.5, 
        categoryPercentage: 0.5 
       }] 
      } 
     } 
    }); 

:

HTML

<canvas id="mybarChart"></canvas> 

자바 스크립트를 나는 각 막대에 과 같은 범례를 추가하려하지만 지금은 모양이 같습니다.

나는 추가하려고 시도했다.

onAnimationComplete: function() { 

      var ctx = this.chart.ctx; 
      ctx.font = this.scale.font; 
      ctx.fillStyle = this.scale.textColor 
      ctx.textAlign = "center"; 
      ctx.textBaseline = "bottom"; 

      this.datasets.forEach(function (dataset) { 
       dataset.points.forEach(function (points) { 
        ctx.fillText(points.value, points.x, points.y - 10); 
       }); 
      }) 
     } 

그러나 여전히 같은 결과. 내가 도대체 ​​뭘 잘못하고있는 겁니까? 뭔가가 here인데 각 막대에 표시된 레이블은 Y 축의 눈금입니다. 각 막대에 범례를 추가하고 툴팁을 유지할 수 있습니까?

미리 감사드립니다.

Answer 1

실제로 여러 가지 방법으로이를 수행 할 수 있습니다. 간단히하기 위해 제공된 예제를 수정합니다.

라벨이 바 안에 들어가는 것을 명심하십시오. 이 코드를 쉽게 바꿔 외부에 배치 할 수 있지만, 로직을 추가하여 차트 상단이나 다른 막대에 오버 플로우되지 않도록해야합니다 (단순 논리가 아닌).

또한이 방법을 사용하려면 각 데이터 세트의 레이블을 구성해야합니다 (어쨌든 일반 범례를 구동하는 데 필요함).

animation.onComplete 속성에 넣으십시오.

function() { 
    var ctx = this.chart.ctx; 
    ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily); 
    ctx.textAlign = 'left'; 
    ctx.textBaseline = 'bottom'; 

    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, 
      scale_max = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._yScale.maxHeight; 
     left = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.left; 
     offset = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._xScale.longestLabelWidth; 
     ctx.fillStyle = '#444'; 
     var y_pos = model.y - 5; 
     var label = model.label; 
     // Make sure data value does not get overflown and hidden 
     // when the bar's value is too close to max value of scale 
     // Note: The y value is reverse, it counts from top down 
     if ((scale_max - model.y)/scale_max >= 0.93) 
     y_pos = model.y + 20; 
     // ctx.fillText(dataset.data[i], model.x, y_pos); 

     if (dataset.data[i] > 0) { 
     ctx.fillText(dataset.label, left + 10, model.y + 8); 
     } 
    } 
    }); 
} 

여기에는 jsfiddle example (입력 한 예에서 나온 것입니다)입니다.