问题：
隐藏分组堆叠条形图中的空条形-Chart.js
祁驰
我使用的是Chart.js2.5.0版本，需要知道是否有任何方法可以隐藏分组堆叠条形图中每组的空条？图表数据集中的某些数据值可以为空。
这里是我想要的：组合图表类型（分组和堆叠）
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
});
小提琴:https://jsfidle.net/q_sabawoon/atlxlg7x/
请帮帮忙。
共有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
}
...
请看一看你修改过的代码，看看它是如何工作的。
null
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;
}html lang-html prettyprint-override"><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>
类似资料：
-
我试图在python中使用plotly创建一个条形图，它既是堆叠的，又是分组的。 玩具示例（不同年份的花费和收入）： 更新：根据这个Github的问题，堆叠的，分组的酒吧情节正在为未来的情节版本开发，所以这可能不会再是一个问题了。
-
我有以下不同月份的数据 一月：[1,5,3] Feb：[10,5] 三月：[4,8] 四月：[7] 可能：[3,1,5,0,7] 我想生成如下所示的条形图 现在，我有以下代码，我想知道如何生成如上图所示的条形图。 }); 非常感谢。
-
Highcharts 条形图 以下实例演示了堆叠条形图。 我们在前面的章节已经了解了 Highcharts 基本配置语法。接下来让我们来看下其他的配置。 配置 plotOptions 配置图表堆叠使用 plotOptions.series.stacking，并设置为 "normal"。如果禁用堆叠可设置为 null ， "normal" 通过值设置堆叠， "percent" 堆叠则按百分比。 v
-
我需要一张这样的图表： 我找到了这个示例，但它使用了旧版本的。我尝试使用v2.0，但我不明白。 有人能贴个例子吗？
-
参考Mike Bostick的Stacked to Grouped Bar Chart示例，我正在修改它以处理CSV文件。我已经在这方面工作了几个星期，并且查看了关于堆栈溢出和其他地方的无数示例，我被难住了。 堆叠条形图工作。 堆叠条形图： 在函数中，我想乘以一个与序列或键对应的数字。我当前正在将此函数中的数字1乘以占位符。 和csv文件：
-
问题内容： 我使用以下代码处理了一个简单的3d条形图： 认为这只是一个测试，到目前为止，一切似乎都还很清楚。我只是想知道如何以堆叠的方式绘制这9个条形图的每一个，以便例如将每个条形图分成4个部分，组成整个条形图。 基本上，我想以此处的示例方式执行此操作。 但是，我希望有2个堆栈，而不是2个堆栈。有什么想法可以从我现在的角度出发吗？每个提示将不胜感激。 谢谢！ 编辑：如果我想实现每个堆叠的酒吧给定的