您好我如何为数据集列设置默认背景色?喜欢在图像上。 列的灰色部分。因此,每列将具有从0到最大值的灰色背景色。
这是我的数据图表的代码。我在chart.js网站上查看了示例,但在这种情况下我找不到任何内容
var ctx = document.getElementById("data");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Today', '12 Th', '13 Fr', '14 St', '15 Sn', '16 Mn', '17 Tu'],
datasets: [{
label: 'Capacity',
data: [20.7, 10, 40, 2, 100, 43, 34],
backgroundColor: '#43d100'
},
{
label: 'Confirmed',
data: [11.4, 100, 20, 42, 10, 20, 65],
backgroundColor: '#dc1f1f'
}
]
},
options: {
legend: {
display: false
},
layout: {
borderWidth: 0
},
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false,
borderWidth: 0,
drawBorder: false
}
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
display: false,
max: 200,
fill: "#07C"
},
gridLines: {
display: false,
borderWidth: 0,
drawBorder: false
}
}]
}
}
});
答案 0 :(得分:1)
列背景色不存在选项。
需要添加第三系列来代表背景。
可以通过从最大值中减去原始值来轻松实现。
可以使用filter
选项删除背景系列的工具提示。
请参阅以下工作片段...
$(document).ready(function() {
// original datasets
var chartData = [{
label: 'Capacity',
data: [20.7, 10, 40, 2, 100, 43, 34],
backgroundColor: '#43d100'
},
{
label: 'Confirmed',
data: [11.4, 100, 20, 42, 10, 20, 65],
backgroundColor: '#dc1f1f'
}];
// max value - background dataset
var maxValue = 200;
var maxData = {
label: 'Max',
data: [],
backgroundColor: '#cccccc'
};
// subtract each dataset value from max value
chartData.forEach(function (dataset) {
dataset.data.forEach(function (value, index) {
if (maxData.data.length <= index) {
maxData.data.push(maxValue);
}
maxData.data[index] -= value;
});
});
// add background dataset
chartData.push(maxData);
var ctx = document.getElementById("data");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Today', '12 Th', '13 Fr', '14 St', '15 Sn', '16 Mn', '17 Tu'],
datasets: chartData // <-- modified dataset
},
options: {
legend: {
display: false
},
layout: {
borderWidth: 0
},
scales: {
xAxes: [{
stacked: true,
gridLines: {
display: false,
borderWidth: 0,
drawBorder: false
}
}],
yAxes: [{
stacked: true,
ticks: {
beginAtZero: true,
display: false,
max: 200,
fill: "#07C"
},
gridLines: {
display: false,
borderWidth: 0,
drawBorder: false
}
}]
},
// remove tooltip for background dataset
tooltips: {
filter: function (tooltipItem, data) {
return (tooltipItem.datasetIndex < (chartData.length - 1));
},
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="data"></canvas>