標簽未顯示在ChartJS中

Question

我將ChartJS用於實現圖表，但是我注意到圖表的標簽之一是隱藏的。 它沒有在條上方顯示其標簽。 我在下面添加了一個屏幕截圖，用於比較兩個不同的條形圖。 左圖顯示標簽，即使該標簽位於最頂部，但另一標簽未顯示。 請在下面查看我的屏幕截圖和代碼。

function createChart(context, type, bgColor, bdColor, labels, actualData, options = {}){
    new Chart(context, {
        type: type,
        data: {
            labels: labels,
            datasets: [{
                label: "Actual",
                backgroundColor: bgColor,
                borderColor: bdColor,
                data: actualData,
            }]
        },

        options: options
    });
}


function getOptions(displayLegend = true){
    return {
      events: false,
         showTooltips: false,
         legend: {
             display: displayLegend
         },
         animation: {
             duration: 0,
             onComplete: function(){
                 var ctx = this.chart.ctx;
                 ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
                 ctx.textAlign = 'center';
                 ctx.textBaseLine = 'bottom';
                 ctx.fillStyle = '#0b7707';

                 this.data.datasets.forEach(function(dataset){
                            console.log(dataset);
                     for(var i = 0; i < dataset.data.length; i++){
                         for(var key in dataset._meta){
                             var model = dataset._meta[key].data[i]._model;
                             ctx.fillText(dataset.data[i], model.x, model.y - 13);
                         }
                     }
                 });
             }
         }
     };
 }

Answer 1

這看起來像是數據標簽從畫布上移出的明顯情況，因為條形圖根據數據值動態獲取高度。 您可以設置最大y-tick設置來解決此問題。 這是jsfiddle-> https://jsfiddle.net/Luaf2tm4/5979/

希望能幫助到你！

var canvas = document.getElementById('myChart');
var data = {
  labels: ["January", "February", "March", "April", "May", "June"],
  datasets: [{
    label: "My First dataset",
    backgroundColor: "rgba(255,99,132,0.2)",
    borderColor: "rgba(255,99,132,1)",
    borderWidth: 2,
    hoverBackgroundColor: "rgba(255,99,132,0.4)",
    hoverBorderColor: "rgba(255,99,132,1)",
    data: [500, 2000, 800, 600, 950, 890],
  }]
};

function getOptions(displayLegend = false) {
  return {
    events: false,
    showTooltips: false,
    legend: {
      display: displayLegend
    },
    scales: {
      yAxes: [{
        display: true,
        stacked: true,
        ticks: {
            stepSize: 200,
          min: 0, // minimum value
          max: 2200 // maximum value, you can either hard code if you know your datainput, else computer the value through some logic i.e taking the max value from the dataset and adding some extra value to it. 
        }
      }]
    },
    animation: {
      duration: 0,
      onComplete: function() {
        var ctx = this.chart.ctx;
        ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily);
        ctx.textAlign = 'center';
        ctx.textBaseLine = 'bottom';
        ctx.fillStyle = '#0b7707';

        this.data.datasets.forEach(function(dataset) {
          console.log(dataset);
          for (var i = 0; i < dataset.data.length; i++) {
            for (var key in dataset._meta) {
              var model = dataset._meta[key].data[i]._model;
              ctx.fillText(dataset.data[i], model.x, model.y - 10);
            }
          }
        });
      }
    }
  };
}

var myBarChart = Chart.Bar(canvas, {
  data: data,
  options: getOptions()
});