标签未在 ChartJS 中显示答案

【问题标题】：Label is not showing in ChartJS标签未在 ChartJS 中显示
【发布时间】：2018-10-15 08:05:09
【问题描述】：

我使用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);
                         }
                     }
                 });
             }
         }
     };
 }

【问题讨论】：

都使用相同的css？似乎正确的一个削减了顶部。
@ChaseChoi 除了颜色之外，我没有为这些添加任何 CSS。
需要更多代码来检查问题。而且我不确定标签是否存在于图例后面，因为图例的部分未显示在正确的图像上。或者您编辑此小提琴以重现您的问题。 jsfiddle.net/Luaf2tm4/5973
我编辑了它。请检查此jsfiddle.net/Luaf2tm4/5974
我设置图例>显示为false

标签： javascript chart.js

【解决方案1】：

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

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

【讨论】：

我用过这个，对我来说很好用，非常感谢，我投票赞成这个答案

【解决方案2】：

这看起来像是数据标签离开画布的明显情况，因为条形图根据数据值动态获取高度。您可以设置最大 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()
});

【讨论】：