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

Answer 2

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

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

标签未显示在ChartJS中

2 个答案: