隐藏分组堆积条形图中的空条 - chart.js [英] Hide empty bars in Grouped Stacked Bar Chart - 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
