隐藏分组堆积条形图中的空条 - chart.js

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

问题描述

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

这就是我想要的:

请查看您修改后的代码，看看它是如何工作的.

var options = {响应式:真实，保持纵横比:假，工具提示:{模式:'标签'，回调:{标签:功能(工具提示项，数据){var dataset = data.datasets[tooltipItem.datasetIndex];if (tooltipItem.index == 0 && tooltipItem.datasetIndex !== 0)返回空值；return dataset.label + ': ' + numeric(dataset.data[tooltipItem.index]).format('($ 0.0 a)');}}},秤:{x轴:[{id: '开场',显示:假},{id: '季度',偏移量:真，网格线: {偏移网格线:真}}],y轴:[{滴答声:{beginAtZero:假，用户回调:函数(值){返回数字(值).format('($ 0.0 a)')；}}}]},传奇: {标签: {字体大小:11，使用点样式:真，填充:15，过滤器:(legendItem，chartData)=>{if (legendItem.datasetIndex > 0) 返回真；}}}}变量数据 = {标签:[期初余额"，Qtr-1"，Qtr-2"，Qtr-3"，Qtr-4"]，数据集:[{标签:期初余额"，数据:[1120000]，backgroundColor: 'rgba(243, 194, 0, .3)',边框宽度:1，边框颜色:'#F3C200'，hoverBackgroundColor: '#F3C200',hoverBorderColor: '#7d6505',堆栈:'OB'，类别百分比:0.6，xAxisID:打开"}, {标签:收入"，数据:[,210000, 258900, 475669, 402569],backgroundColor: 'rgba(42, 180, 192, .3)',边框宽度:1，边框颜色:'#166269'，hoverBackgroundColor: '#2ab4c0',hoverBorderColor: '#2ab4c0',堆栈:'收入'，类别百分比:1，xAxisID:季度"}, {标签:预期收入"，数据:[,215000, 320000, 412236, 385569],backgroundColor: 'rgba(76, 135, 185, .4)',边框宽度:1，边框颜色:'#2a587f'，hoverBackgroundColor: '#4c87b9',hoverBorderColor: '#2a587f',堆栈:'收入'，类别百分比:1，xAxisID:季度"}, {标签:支出"，数据:[,204560, 256987, 236981, 365587],backgroundColor: 'rgba(243, 82, 58, .3)',边框宽度:1，边框颜色:'#f3523a'，hoverBackgroundColor: '#f56954',hoverBorderColor: '#f3523a',堆栈:'支出'，类别百分比:1，xAxisID:季度"}, {标签:预期支出"，数据:[,269877, 325698, 435887, 423369],backgroundColor: 'rgba(228, 58, 69, .4)',边框宽度:1，边框颜色:'#b32a33'，hoverBackgroundColor: '#e43a45',hoverBorderColor: '#b32a33',堆栈:'支出'，类别百分比:1，xAxisID:季度"}, {标签:平衡"，数据:[,54400, 19013, 14569, 24998],边框颜色:'#1ebfae'，backgroundColor: 'rgba(30, 191, 174, .3)',边框宽度:1，hoverBackgroundColor: '#1ebfae',hoverBorderColor: '#099486',堆栈:'平衡'，类别百分比:1，xAxisID:季度"}]};const chart = new Chart("fundStatus", {类型:'酒吧'，数据:数据，选项:选项});

#fundStatus {最小高度:400px；}

<script src="https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js"></脚本><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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！

本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！

隐藏分组堆积条形图中的空条 - chart.js

问题描述

相关文档推荐