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

Question

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

这是我想要的:
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
});

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

请帮忙。

Answer 1

这个问题可以通过定义两个单独的 x 轴来解决，如下所示:

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

然后将带有选项 xAxisID 的数据集链接到它们对应的 x 轴:

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

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

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>