是否可以为不同的数据集设置不同的条宽?我在一个堆栈中有几个数据集,在自己的堆栈中有另一个数据集。单个数据集应该比其他堆栈更窄
Example。在这里,我复制了左堆栈,导致它是右堆栈宽度的两倍。这会破坏某些效果,包括非零边框
var data = {
labels: ["1", "2", "3", "4", "5"],
datasets: [
{
label: "d1",
backgroundColor: "rgba(182,127,0,1)",
borderColor: "rgba(117,61,41,1)",
borderWidth: 1,
data: [42, 78, 64, 90, 97],
stack: "s1"
},
{
label: "d2",
backgroundColor: "rgba(71,161,65,1)",
borderColor: "rgba(36,93,56,1)",
borderWidth: 1,
data: [27, 63, 46, 64, 43],
stack: "s1"
},
{
label: "d3",
backgroundColor: "rgba(255,141,106,1)",
borderColor: "rgba(99,60,32,1)",
borderWidth: 1,
data: [18, 50, 23, 83, 35],
stack: "s1"
},
{
label: "d1",
backgroundColor: "rgba(182,127,0,1)",
borderColor: "rgba(117,61,41,1)",
borderWidth: 1,
data: [42, 78, 64, 90, 97],
stack: "s1b"
},
{
label: "d2",
backgroundColor: "rgba(71,161,65,1)",
borderColor: "rgba(36,93,56,1)",
borderWidth: 1,
data: [27, 63, 46, 64, 43],
stack: "s1b"
},
{
label: "d3",
backgroundColor: "rgba(255,141,106,1)",
borderColor: "rgba(99,60,32,1)",
borderWidth: 1,
data: [18, 50, 23, 83, 35],
stack: "s1b"
},
{
label: "d4",
backgroundColor: "rgba(160,160,160,1)",
borderColor: "rgba(60,60,60,1)",
borderWidth: 1,
data: [152, 141, 170, 194, 128],
stack: "s2",
barPercentage: 0.3
}
]
};
var options = {
scales: {
xAxes: [{
categoryPercentage: 0.6,
barPercentage: 1
}]
},
legend: {
display: false
}
};
var barChart = new Chart($("#myChart"), {
type: 'bar',
data: data,
options: options
});
答案 0 :(得分:2)
这实际上可以在chart.js中进行,但解决方案有点“hackish”。它的要点是您可以创建第二个x轴刻度并将barThickness
属性设置为小于另一个轴的值。然后,将数据集分配给此访问权限,最后将比例显示设置为false。
您最终会在1轴上生成一些数据集,而在另一个隐藏轴上生成另一个数据集。其他一切仍然有效(没有你在问题中提到的破坏效果)。
以下是您的选择。
var options = {
scales: {
xAxes: [{
categoryPercentage: 0.6,
barPercentage: 1,
}, {
id: 'x-axis-2',
type: 'category',
display: false,
categoryPercentage: 0.6,
barPercentage: 1,
barThickness: 20,
gridLines: {
offsetGridLines: true
}
}],
},
legend: {
display: false
}
};
您必须确保将xAxisID: 'x-axis-2'
添加到要绑定到新轴的数据集中。
这是展示所有这一切的codepen example。
您甚至可以通过更改周围的比例来为水平条形图执行此操作。请参阅此codepen example来显示此内容。
答案 1 :(得分:0)
chart.js文档显示layout = { separators = ',.' }
属性available in the options for a chart,但没有此类选项at the data set level。我想你可能运气不好,除非你想创建自己的自定义图表类型。