chartjs:如何删除特定标签 [英] chartjs: How to remove specific label

问题描述

我有一个带有以下数据和选项的条形图:

I have a Bar Chart with these data and options:

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文件.有什么建议吗?

My problem is that I don't want to show the first dataset's label. If I don't define it, it shows the yellow box with the value "undefine" next to it. I suppose that I must modify the Chart.js file. Any suggestions?

推荐答案

这可以通过使用legend 的标签的filter功能来实现.

This could be achieved, using the filter function of legend­'s label.

请参见传奇标签配置

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

In short, add the following in your chart options ...

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>

这篇关于chartjs:如何删除特定标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！