Javascript 标签未显示在ChartJS中

我正在使用

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);
                         }
                     }
                 });
             }
         }
     };
 }

函数createChart（上下文、类型、bgColor、bdColor、标签、实际数据、选项={}）{
新图表（上下文{
类型：类型，
数据：{
标签：标签，
数据集：[{
标签：“实际”，
背景颜色：bgColor，
边框颜色：bdColor，
数据：实际数据，
}]
},
选项：选项
});
}
函数getOptions（displayLegend=true）{
返回{
事件：错误，
showTooltips:false，
图例：{
显示：显示图例
},
动画：{
持续时间：0，
onComplete:function（）{
var ctx=this.chart.ctx；
ctx.font=Chart.helpers.fontString（Chart.defaults.global.defaultFontFamily，'normal'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
ctx.fillStyle='#0b7707'；
this.data.datasets.forEach（函数（数据集）{
console.log（数据集）；
对于（var i=0；i

---

这看起来像是数据标签从画布中消失的明显例子，因为条形图根据数据值动态地获取高度。可以设置“最大y记号”设置来解决此问题。这里是jsfiddle->

希望有帮助

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()
});

var canvas=document.getElementById（'myChart'）；
风险值数据={
标签：[“一月”、“二月”、“三月”、“四月”、“五月”、“六月”]，
数据集：[{
标签：“我的第一个数据集”，
背景颜色：“rgba（255,99132,0.2）”，
边框颜色：“rgba（255,99132,1）”，
边界宽度：2，
hoverBackgroundColor:“rgba（255,99132,0.4）”，
hoverBorderColor:“rgba（255,99132,1）”，
数据：[5002000800600950890]，
}]
};
函数getOptions（displayLegend=false）{
返回{
事件：错误，
showTooltips:false，
图例：{
显示：显示图例
},
比例：{
雅克斯：[{
显示：对，
对,，
滴答声：{
步长：200，
最小值：0，//最小值
max:2200//maximum value，如果您知道数据输入，您可以硬编码，或者通过一些逻辑计算值，即从数据集中获取最大值并向其添加一些额外值。
}
}]
},
动画：{
持续时间：0，
onComplete:function（）{
var ctx=this.chart.ctx；
ctx.font=Chart.helpers.fontString（Chart.defaults.global.defaultFontFamily，'normal'，Chart.defaults.global.defaultFontFamily）；
ctx.textAlign='中心'；
ctx.textb基线='底部'；
ctx.fillStyle='#0b7707'；
this.data.datasets.forEach（函数（数据集）{
console.log（数据集）；
对于（var i=0；i

我通过在图表中添加一个空标题解决了这个问题，因此它将在图表上方创建空间，并在条形图上方显示标签

options: {
    title: {
        display: true,
        text: ' '
    },
....

---

两者都使用相同的css？似乎是正确的一个削减了顶部。@ChaseChoi我没有为这些添加任何css，除了颜色。需要更多的代码来检查这个问题。我不确定图例后面是否有标签，因为图例的部分没有显示在正确的图像上。或者您编辑此小提琴以复制您的问题。我编辑了它。请检查此项，我将图例>显示设置为

false

我使用了此项，它对我来说工作正常，非常感谢，我投票支持此项作为答案