在分组堆积的条形图中隐藏空条-chart.js [英] Hide empty bars in Grouped Stacked Bar Chart - chart.js

查看：56
本文介绍了在分组堆积的条形图中隐藏空条-chart.js的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用2.5.0版chart.js，需要知道是否有任何方法可以隐藏成组的堆叠条形图中每个组的空条吗？图表数据集中的某些数据值可以为null。



这就是我想要的：


请查看修改后的代码，并查看其工作原理。


  var选项= {
响应：true，
 keepAspectRatio：false，
工具提示：{
模式：'label' ，
回调：{
标签：function（tooltipItem，data）{
 vardataset = data.datasets [tooltipItem.datasetIndex]; 
 if（tooltipItem.index == 0&& tooltipItem.datasetIndex！== 0）
返回null; 
 return dataset.label +’：’+数字（dataset.data [tooltipItem.index]）。format（’（$ 0.0 a）’）; 
} 
} 
}，
比例尺：{
 x轴：[{
 id：'opening'，
显示：false 
}，
 {
 id：'quarter'，
 offset：true，
 gridLines：{
 offsetGridLines：true 
} 
 } 
]，
 y轴：[{
 ticks：{
 beginAtZero：false，
 userCallback：函数（值）{
返回数字（值） .format（'（（$ 0.0 a）'）; 
} 
} 
}] 
}，
图例：{
标签：{
 fontSize：11，
 usePointStyle： true，
 padding：15，
 filter：（legendItem，chartData）=> {
 if（legendItem.datasetIndex> 0）返回true； 
} 
} 
} 
} 
 var data = {
标签：[期初余额， Qtr-1， Qtr-2 ， Qtr-3， Qtr-4]，
数据集：[{
标签：期初余额，
数据：[1120000]，
 backgroundColor： 'rgba（243，194，0，.3）'，
 borderWidth：1，
 borderColor：'＃F3C200'，
 hoverBackgroundColor：'＃F3C200'，
 hoverBorderColor： '＃7d6505'，
堆栈：'OB'，
 categoryPercentage：0.6，
 xAxisID：打开 
}，{
标签： Income，
 data：[，210000，258900，475669，402569]，
 backgroundColor：'rgba（42，180，192，.3）'，
 borderWidth：1，
 borderColor： '＃166269'，
 hoverBackgroundColor：'＃2ab4c0'，
 hoverBorderColor：'＃2ab4c0'，
 stack：'Income'，
 categoryPercentage：1，
 xAxisID ：季度 
}，{
标签：期望收入，
数据：[，215000，320000，412236，385569]，
 backgroundColor：'rgba（76， 135，185，.4）'，
 borderWidth：1，
 borderColor：'＃2a587f'，
 hoverBackgroundColor：'＃4c87b9'，
 hoverBorderColor：'＃2a587f'，
 stack：'Income'，
 categoryPercentage：1，
 xAxisID：季度 
}，{
标签：支出，
数据：[，204560，256987，236981，365587]，
 backgroundColor：'rgba（243，82，58，.3）'，
 borderWidth：1，
 borderColor：'＃f3523a'，
 hoverBackgroundColor：'＃f56954'，
 hoverBorderColor：＃f3523a，
堆栈： Expenditures，
 categoryPercentage：1，
 xAxisID：季度 
}，{
标签： 期望的支出，
数据：[，269877，325698，435887，423369]，
背景颜色：'rgba（228，58，69，.4）'，
 borderWidth：1， 
 borderColor：'＃b32a33'，
 hoverBackgroundColor：'＃e43a45'，
 hoverBorderColor：'＃b32a33'，
堆栈：'Expenditures'，
 category百分比：1 ，
 xAxisID：季度 
}，{
标签： Balance，
数据：[，54400、19013、14569、24998]，
 borderColor：'＃1ebfae'，
 backgroundColor：'rgba（30，191，174，。 3）'，
 borderWidth：1，
 hoverBackgroundColor：'＃1ebfae'，
 hoverBorderColor：'＃099486'，
 stack：'Balance'，
 categoryPercentage： 1，
 xAxisID：季度 
}] 
}; 
 
 const chart = new Chart（ fundStatus，{
 type：'bar'，
 data：data，
 options：options 
}） ;  

  #fundStatus {
最小高度： 400px; 
}  

 < script src = https ：//cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js< / script> 
< script src = https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js>< / script> 
< canvas id = fundStatus>< / canvas>


I am using chart.js version 2.5.0 and need to know if there any way to hide the empty bars from each group in a grouped stacked bar chart? Some data values in chart datasets can be null.

Here is what I want: Combo Chart Type (Grouped and Stacked)

    var options = {
    responsive: true,
    maintainAspectRatio: false,
    tooltips: {
        mode: 'label',
        callbacks: {
            label: function(tooltipItem, data) {
                var dataset = data.datasets[tooltipItem.datasetIndex];

                if (tooltipItem.index == 0 && tooltipItem.datasetIndex !== 0)
                    return null;

                return dataset.label + ': ' + numeral(dataset.data[tooltipItem.index]).format('($ 0.0 a)');
            }
        }
    },
    scales: {
        xAxes: [{
            display: true,
            gridLines: {
                display: true
            },
            labels: {
                show: true
            }
        }],
        yAxes: [{
            type: "linear",
            display: true,
            position: "left",
            id: "y-axis-1",
            gridLines: {
                display: false
            },
            labels: {
                show: false
            }
        }, {
            type: "linear",
            display: true,
            gridLines: {
                display: true
            },
            labels: {
                show: true
            },
            ticks: {
                beginAtZero: false,
                userCallback: function(value) {
                    return numeral(value).format('($ 0.0 a)');
                }
            }
        }, {
            type: "linear",
            display: false,
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }, {
            type: "linear",
            display: false,
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }, {
            type: "linear",
            display: false,
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }, {
            type: "linear",
            display: false,
            id: "y-axis-5",
            gridLines: {
                display: false
            },
            labels: {
                show: true
            }
        }]
    },
    legend: {
        labels: {
            fontSize: 11,
            usePointStyle: true,
            padding: 15,
            filter: (legendItem, chartData) => {
                if (legendItem.datasetIndex > 0) return true;
            }
        }
    }
}
var data = {
    labels: ["Opening Balance", "Qtr-1", "Qtr-2", "Qtr-3", "Qtr-4"],
    datasets: [{
        type: 'bar',
        label: "Opening Balance",
        data: [1120000],
        fill: true,
        backgroundColor: 'rgba(243, 194, 0, .3)',
        borderWidth: 1,
        borderColor: '#F3C200',
        hoverBackgroundColor: '#F3C200',
        hoverBorderColor: '#7d6505',
        stack: 'OB'
    }, {
        type: 'bar',
        label: "Income",
        data: [, 210000, 258900, 475669, 402569],
        fill: true,
        backgroundColor: 'rgba(42, 180, 192, .3)',
        borderWidth: 1,
        borderColor: '#166269',
        hoverBackgroundColor: '#2ab4c0',
        hoverBorderColor: '#2ab4c0',
        stack: 'Income'
    }, {
        type: 'bar',
        label: "Income Expected",
        data: [, 215000, 320000, 412236, 385569],
        fill: true,
        backgroundColor: 'rgba(76, 135, 185, .4)',
        borderWidth: 1,
        borderColor: '#2a587f',
        hoverBackgroundColor: '#4c87b9',
        hoverBorderColor: '#2a587f',
        stack: 'Income'
    }, {
        type: 'bar',
        label: "Expenditures",
        data: [, 204560, 256987, 236981, 365587],
        fill: true,
        backgroundColor: 'rgba(243, 82, 58, .3)',
        borderWidth: 1,
        borderColor: '#f3523a',
        hoverBackgroundColor: '#f56954',
        hoverBorderColor: '#f3523a',
        stack: 'Expenditures'
    }, {
        type: 'bar',
        label: "Expenditures Expected",
        data: [, 269877, 325698, 435887, 423369],
        fill: true,
        backgroundColor: 'rgba(228, 58, 69, .4)',
        borderWidth: 1,
        borderColor: '#b32a33',
        hoverBackgroundColor: '#e43a45',
        hoverBorderColor: '#b32a33',
        stack: 'Expenditures'
    }, {
        label: "Balance",
        type: 'bar',
        data: [, 54400, 19013, 14569, 24998],
        fill: true,
        borderColor: '#1ebfae',
        backgroundColor: 'rgba(30, 191, 174, .3)',
        borderWidth: 1,
        hoverBackgroundColor: '#1ebfae',
        hoverBorderColor: '#099486',
        stack: 'Balance'
    }]
};

new Chart(document.getElementById("fundStatus").getContext('2d'), {
    type: 'bar',
    data: data,
    options: options
});

The fiddle: https://jsfiddle.net/q_sabawoon/atLxLg7x/

Please help.

解决方案

This problem can be solved by defining two separate x-axes as follows:

xAxes: [{       
    id: 'opening',    
    display: false
  },
  {
    id: 'quarter',
    offset: true,
    gridLines: {
      offsetGridLines: true
    }
  }]

Then link the datasets with option xAxisID to their corresponding x-axis:

datasets: [{
  label: "Opening Balance",
  ...
  xAxisID: "opening"
}, {
  label: "Income", 
  ...
  xAxisID: "quarter" // the same for all other datasets
}
...

Please take a look at your amended code and see how it works.

var options = {
  responsive: true,
  maintainAspectRatio: false,
  tooltips: {
    mode: 'label',
    callbacks: {
      label: function(tooltipItem, data) {
        var dataset = data.datasets[tooltipItem.datasetIndex];
        if (tooltipItem.index == 0 && tooltipItem.datasetIndex !== 0)
          return null;
        return dataset.label + ': ' + numeral(dataset.data[tooltipItem.index]).format('($ 0.0 a)');
      }
    }
  },
  scales: {
    xAxes: [{       
        id: 'opening',    
        display: false
      },
      {
        id: 'quarter',
        offset: true,
        gridLines: {
          offsetGridLines: true
        }
      }
    ],
    yAxes: [{
      ticks: {
        beginAtZero: false,
        userCallback: function(value) {
          return numeral(value).format('($ 0.0 a)');
        }
      }
    }]
  },
  legend: {
    labels: {
      fontSize: 11,
      usePointStyle: true,
      padding: 15,
      filter: (legendItem, chartData) => {
        if (legendItem.datasetIndex > 0) return true;
      }
    }
  }
}
var data = {
  labels: ["Opening Balance", "Qtr-1", "Qtr-2", "Qtr-3", "Qtr-4"],
  datasets: [{
    label: "Opening Balance",
    data: [1120000],
    backgroundColor: 'rgba(243, 194, 0, .3)',
    borderWidth: 1,
    borderColor: '#F3C200',
    hoverBackgroundColor: '#F3C200',
    hoverBorderColor: '#7d6505',
    stack: 'OB',
    categoryPercentage: 0.6,
    xAxisID: "opening"
  }, {
    label: "Income",
    data: [,210000, 258900, 475669, 402569],
    backgroundColor: 'rgba(42, 180, 192, .3)',
    borderWidth: 1,
    borderColor: '#166269',
    hoverBackgroundColor: '#2ab4c0',
    hoverBorderColor: '#2ab4c0',
    stack: 'Income',
    categoryPercentage: 1,
    xAxisID: "quarter"
  }, {
    label: "Income Expected",
    data: [,215000, 320000, 412236, 385569],
    backgroundColor: 'rgba(76, 135, 185, .4)',
    borderWidth: 1,
    borderColor: '#2a587f',
    hoverBackgroundColor: '#4c87b9',
    hoverBorderColor: '#2a587f',
    stack: 'Income',
    categoryPercentage: 1,
    xAxisID: "quarter"
  }, {
    label: "Expenditures",
    data: [,204560, 256987, 236981, 365587],
    backgroundColor: 'rgba(243, 82, 58, .3)',
    borderWidth: 1,
    borderColor: '#f3523a',
    hoverBackgroundColor: '#f56954',
    hoverBorderColor: '#f3523a',
    stack: 'Expenditures',
    categoryPercentage: 1,
    xAxisID: "quarter"
  }, {
    label: "Expenditures Expected",
    data: [,269877, 325698, 435887, 423369],
    backgroundColor: 'rgba(228, 58, 69, .4)',
    borderWidth: 1,
    borderColor: '#b32a33',
    hoverBackgroundColor: '#e43a45',
    hoverBorderColor: '#b32a33',
    stack: 'Expenditures',
    categoryPercentage: 1,
    xAxisID: "quarter"
  }, {
    label: "Balance",
    data: [,54400, 19013, 14569, 24998],
    borderColor: '#1ebfae',
    backgroundColor: 'rgba(30, 191, 174, .3)',
    borderWidth: 1,
    hoverBackgroundColor: '#1ebfae',
    hoverBorderColor: '#099486',
    stack: 'Balance',
    categoryPercentage: 1,
    xAxisID: "quarter"
  }]
};

const chart = new Chart("fundStatus", {
  type: 'bar',
  data: data,
  options: options
});

#fundStatus {
  min-height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.js"></script>
<canvas id="fundStatus"></canvas>

这篇关于在分组堆积的条形图中隐藏空条-chart.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆