chartjs 默认背景颜色为列
chartjs default background color to columns
您好,如何为数据集列设置默认背景色?像图像一样。
列的灰色部分。所以每一列都会有从 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
}
}]
}
}
});
列背景颜色不存在选项。
需要添加第三个系列来表示背景。
这可以通过从最大值中减去原始值来轻松完成。
可以使用 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>
您好,如何为数据集列设置默认背景色?像图像一样。 列的灰色部分。所以每一列都会有从 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
}
}]
}
}
});
列背景颜色不存在选项。
需要添加第三个系列来表示背景。
这可以通过从最大值中减去原始值来轻松完成。
可以使用 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>