막대 그래프 (chart.js)에 데이터 값을 표시하는 방법은 무엇입니까?

Question

막대 그래프의 맨 위에 값을 표시하고 싶지만 할 수 없습니다. 가치를 보여줄 수있는 방법이 있습니까? 나는 해결 된 동일한 문제를 찾으려고 노력했지만 아무런 효과가 없었다.

는 필요에 따라이 예에서 data labelling plugin을 적응

$(document).ready(function() { 
$.ajax({ 
    url: "http://172.16.13.35:8080/MonthlyMonitoring/data2.php", 
    method: "GET", 
    success: function(data2) { 
    console.log(data2); 
    var monthly = []; 
    var kwh = []; 

    for (var i in data2) { 
     monthly.push(data2[i].monthly); 
     kwh.push(data2[i].kwh); 
    } 

    var chartdata = { 
     labels: monthly, 
     datasets: [{ 
      label: 'KWH Monthly', 
      backgroundColor: 'rgb(255, 158, 1)', 
      borderColor: 'rgba(134,159,152, 1)', 
      hoverBackgroundColor: 'rgba(223, 178, 82, 0.71)', 
      hoverBorderColor: 'rgba(230, 236, 235, 0.75)', 
      data: kwh 
     }] 
    }; 

    var ctx = $("#mycanvas2"); 

    var barGraph = new Chart(ctx, { 
     type: 'bar', 
     data: chartdata, 
     showTooltips: false, 
     options: { 
      scales: { 
       yAxes: [{ 
       ticks: { 
        beginAtZero: true 
       } 
       }] 
      } 
     } 
    }); 


    }, 

    error: function(data2) { 
    console.log(data2); 
    } 
}); 
}); 

index.php를

<div id="chart-container1"> 
    <canvas id="mycanvas2"></canvas> 
</div> 

Answer 1

시도를 app.js :

여기에 내 현재 코드입니다.

See in action

// Define a plugin to provide data labels 
Chart.plugins.register({ 
    afterDatasetsDraw: function(chart, easing) { 
     // To only draw at the end of animation, check for easing === 1 

     var ctx = chart.chart.ctx; // DIFFERS FROM ORIG VERSION 

     chart.data.datasets.forEach(function (dataset, i) { 
      var meta = chart.getDatasetMeta(i); 
      if (!meta.hidden) { 
       meta.data.forEach(function(element, index) { 
        // Draw the text in black, with the specified font 
        ctx.fillStyle = 'rgb(0, 0, 0)'; 

        var fontSize = 16; 
        var fontStyle = 'normal'; 
        var fontFamily = 'Helvetica Neue'; 
        ctx.font = Chart.helpers.fontString(fontSize, fontStyle, fontFamily); 

        // Just naively convert to string for now 
        var dataString = dataset.data[index].toString(); 

        // Make sure alignment settings are correct 
        ctx.textAlign = 'center'; 
        ctx.textBaseline = 'middle'; 

        var padding = 5; 
        var position = element.tooltipPosition(); 
        ctx.fillText(dataString, position.x, position.y - (fontSize/2) - padding); 
       }); 
      } 
     }); 
    } 
});