我想在两行之间添加背景色。
就像这张图片。
如何在两行之间添加背景色。如果你检查了图像，我需要在2月至3月的两行之间设置背景色。我查看了官方文档，但没有发现3.1版本的任何内容。
请引导我。谢谢。
这是我的全部代码。
var selectedPoint;
window.chartColors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(231,233,237)'
};
var mainDataset = [];
mainDataset['line'] = [
20, 22, 22 , 22, 23, 12, 13, 14, 22, 25, 27, 27,
20, 20, 21 , 22, 22, 22, 30, 31, 31, 30, 31, 31.5,
];
mainDataset['months'] = [
"08/04 08:00", "08/04 12:00", "08/04 16:00", "08/04 20:00", "09/04 00:00",
"09/04 04:00", "09/04 08:00", "09/04 12:00", "09/04 16:00", "09/04 20:00",
"10/04 00:00", "10/04 04:00", "10/04 08:00", "10/04 12:00", "10/04 16:00",
"10/04 20:00", "11/04 00:00", "11/04 04:00", "11/04 08:00", "11/04 12:00",
"11/04 16:00", "11/04 20:00", "12/04 00:00", "12/04 04:00"
];
mainDataset['comments'] = [
'', '', '' , '', '', '', '', '', '', '', '', '',
'', '', '' , '', '', '', '', '', '', '', '', 'Last Comment',
];
var config = {
type: 'line',
data: {
labels: mainDataset['months'],
datasets:
[
{
borderWidth: 1, // Line thickness
pointRadius: 2, // Point thickness
label: "Measured Value",
fill: false,
backgroundColor: window.chartColors.green,
borderColor: window.chartColors.green,
data: mainDataset['line'],
},
{
label: "Alarm Upper Limit",
fill: false,
backgroundColor: 'red',
},
{
label: "Alarm Lower Limit",
fill: false,
backgroundColor: '#990000'
}
]
},
options: {
//events: ['click'],
onClick: function(event, legendItem, legend) {
if(legendItem[0]) {
var dataInd = legendItem[0].index;
var lineInd = legendItem[0].datasetIndex;
var clickedData = legendItem[0].element.parsed.y;
//var clickedData = myLine.data.datasets[lineInd].data[dataInd];
var input = prompt(` Value: ${clickedData} n Comment: ${mainDataset['comments'][dataInd]} n Please enter your Comments`, "");
if (input != null) {
/*
to make it realtime,
first update data into database by ajax call.
Then get data and update line array. Then call update method.
*/
mainDataset['comments'][dataInd] = input;
myLine.update();
}
}
},
responsive: true,
title:{
display:true,
text:'Chart.js Line Chart'
},
plugins: {
tooltip: {
backgroundColor: 'green',
callbacks: {
afterLabel: (data) => {
var dataInd = data.dataIndex;
var lineInd = data.datasetIndex;
var comment = mainDataset['comments'][dataInd];
return [`${comment}`];
},
/*afterBody: (data) => {
var dataInd = data[0].dataIndex;
var lineInd = data[0].datasetIndex;
return [`afterBody: DataSet Index :${lineInd} & Data Index :${dataInd}`];
}*/
}
},
title: {
display: true,
text: 'Custom Chart Title'
}
},
hover: {
mode: 'nearest',
intersect: true,
},
scales: {
x: {
display: true,
scaleLabel: {
display: true,
labelString: 'Month'
},
ticks: {
autoSkip: false,
maxRotation: 90,
minRotation: 90,
},
},
y: {
display: true,
scaleLabel: {
display: true
},
suggestedMin: 0,
suggestedMax: 100,
grid: {
drawBorder: false,
borderDash: [8, 4],
color: function(context) {
if (context.tick.value == 10) {
return '#990000';
} else if (context.tick.value == 30) {
return 'red';
}
return '#EDEDED';
},
}
}
},
}
};
var ctx = document.getElementById("canvas").getContext("2d");
var myLine = new Chart(ctx, config);<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<section id="print-area">
<div style="width:100%;">
<canvas id="canvas"></canvas>
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.1.0/chart.min.js" integrity="sha512-RGbSeD/jDcZBWNsI1VCvdjcDULuSfWTtIva2ek5FtteXeSjLfXac4kqkDRHVGf1TwsXCAqPTF7/EYITD0/CTqw==" crossorigin="anonymous"></script>
</body>
</html>您可以使用Chartjs Annotation插件在特定区域添加背景！