根据我的要求，我想在具有静态背景颜色的折线图中显示没有线条的点。我几乎实现了，但我无法在图表中设置特定的轴背景颜色。我使用了chart.js(折线图)。请看我下面的代码，我尝试了很多请看附图，我想像那个图一样开发(o-10轴1颜色像这样，背景颜色与该轴固定)。
new Chart(document.getElementById("line-chart"), {
type: 'line',
data: {
labels: [0,10, 20, 30, 40, 50, 60, 70, 80, 90],
datasets: [{
data: [0,350, 400, 150, 98, 220, 410],
label: "Man Engines",
// borderColor: "#3e95cd",
backgroundColor: 'rgba(244, 81, 30, 0.8)',
borderColor: 'rgba(244, 81, 30, 0.8)',
pointBackgroundColor: 'rgba(244, 81, 30, 0.5)',
pointBorderColor: 'rgba(244, 81, 30, 0.8)',
fill: false,
pointRadius: 5,
showLine: false
}
]
},
options: {
// title: {
// display: true,
// text: 'World population per region (in millions)'
// },
scales: {
xAxes: [{
gridLines: {
drawOnChartArea: false
},
// ticks: {
// min: 1
// }
}],
yAxes: [{
gridLines: {
drawOnChartArea: false
}
}]
}
// legend: { display: false },
// fillColor: 'rgba(255, 128, 0, 0.8)',
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<canvas id="line-chart"></canvas>像这样的输出
当前实现的输出
最佳答案
您应该使用type: scatter，而不是使用type: line。
然后您可以使用 chartjs-plugin-annotation.js在图表上绘制单独的框和文本。
new Chart(document.getElementById("line-chart"), {
type: 'scatter',
data: {
datasets: [{
data: [{x: 3, y: 398}, {x: 5, y: 350}, {x: 12, y: 396}, {x: 20, y: 160}, {x: 25, y: 100}, {x: 30, y: 195} ],
label: "Man Engines",
borderColor: 'rgba(244, 81, 30, 0.8)',
pointBackgroundColor: 'rgba(0, 0, 0, 1)',
pointBorderColor: 'rgba(244, 81, 30, 0.8)',
pointRadius: 5
}
]
},
options: {
legend: {
display: false
},
scales: {
xAxes: [{
scaleLabel: {
display: true,
labelString: 'BN [mgKOH/g]',
fontStyle: 'bold'
},
gridLines: {
drawOnChartArea: false
},
ticks: {
min: 0,
max: 70,
stepSize: 10
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'Iron (Fe) total [mg/kg]',
fontStyle: 'bold'
},
gridLines: {
drawOnChartArea: false
},
ticks: {
min: 0,
max: 500,
stepSize: 100
}
}]
},
annotation: {
events: ["click"],
annotations: [
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-1",
yScaleID: "y-axis-1",
xMin: 0,
xMax: 100,
yMin: 0,
yMax: 500,
backgroundColor: "rgba(212, 0, 0, 0.8)",
borderWidth: 0
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-1",
yScaleID: "y-axis-1",
xMin: 10,
xMax: 100,
yMin: -10,
yMax: 300,
backgroundColor: "rgba(255, 255, 0, 0.8)",
borderColor: "rgba(255, 128, 0, 0.5)",
borderWidth: 6
},
{
drawTime: "beforeDatasetsDraw",
type: "box",
xScaleID: "x-axis-1",
yScaleID: "y-axis-1",
xMin: 15,
xMax: 45,
yMin: -10,
yMax: 200,
backgroundColor: "rgba(0, 128, 0, 0.8)",
borderColor: "rgba(128, 255, 0, 0.5)",
borderWidth: 6
},
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 400,
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
label: {
fontStyle: 'normal',
fontSize: 18,
fontColor: 'white',
backgroundColor: 'rgba(0, 0, 0, 0)',
content: "Danger - Do not operate in this area",
enabled: true
}
},
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 250,
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
label: {
xAdjust: 40,
fontStyle: 'normal',
fontSize: 18,
fontColor: 'black',
backgroundColor: 'rgba(0, 0, 0, 0)',
content: "Alert area - Adjustment of feed rate may be needed",
enabled: true
}
},
{
drawTime: "afterDatasetsDraw",
type: 'line',
mode: 'horizontal',
scaleID: 'y-axis-1',
value: 150,
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
label: {
xAdjust: -50,
fontStyle: 'normal',
fontSize: 18,
fontColor: 'white',
backgroundColor: 'rgba(0, 0, 0, 0)',
content: "Save area",
enabled: true
}
}
]
}
}
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/chartjs-plugin-annotation/0.5.7/chartjs-plugin-annotation.js"></script>
<canvas id="line-chart"></canvas>关于javascript - 如何在折线图中添加多种背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60149070/