javascript - 图表 : How to remove specific label

Question

我有一个包含这些数据和选项的条形图:

var data = {
    labels: periodnames,
    datasets: [          
        {
            yAxisID: "bar-stacked",
            data: rcash,
            backgroundColor: "#FFCE56",                  
            label:""
        },
    {
        yAxisID:"bar-stacked",
        data: pcash,
        backgroundColor: "#FFCE56",
        label: "cash"           

    }       

    ]

};

var options = {        
    animation: {
        animateScale: true
    },        
    scales: {
        xAxes: [{
        stacked: true,
    }],        
        yAxes: [ 
            {
                display:false,
                id: "line-axis",                  

            },
            {
            id: "bar-stacked",
            stacked: true,                

        }            
        ]
    }
}

finactivityGraphChart = new Chart(ctx, {
    type: 'bar',
    data: data,
    options: options
});

结果图是这样的:

我的问题是我不想显示第一个数据集的标签。如果我没有定义它，它会显示旁边带有值“undefine”的黄色框。我想我必须修改 Chart.js 文件。有什么建议吗？

Answer 1

这可以通过使用 legend*'s* 标签的 filter 函数来实现。

参见 Legend Label Configuration

简而言之，在您的图表选项中添加以下内容......

legend: {
   labels: {
      filter: function(label) {
         if (label.text === 'cash') return true;
      }
   }
},

ᴅᴇᴍᴏ

var ctx = document.querySelector('#c').getContext('2d');
var data = {
   labels: ['Jan', 'Feb', 'Mar'],
   datasets: [{
      yAxisID: "bar-stacked",
      data: [1, 2, 3],
      backgroundColor: "#FFCE56",
      label: "gold"
   }, {
      yAxisID: "bar-stacked",
      data: [-1, -2, -3],
      backgroundColor: "#FFCE56",
      label: "cash"
   }]
};
var options = {
   legend: {
      labels: {
         filter: function(label) {
            if (label.text === 'cash') return true; //only show when the label is cash
         }
      }
   },
   animation: {
      animateScale: true
   },
   scales: {
      xAxes: [{
         stacked: true,
      }],
      yAxes: [{
         display: false,
         id: "line-axis",
      }, {
         id: "bar-stacked",
         stacked: true,
      }]
   }
}
finactivityGraphChart = new Chart(ctx, {
   type: 'bar',
   data: data,
   options: options
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="c"></canvas>