Chart.js Js-Hightligh背景中的一个区域
我需要用0.5和1.5之间的不同颜色高亮显示图表的固定区域 目前我的图表如下: 预期结果如下所示: 正如您在上图中所看到的,其目的是使用不同颜色的固定条,即始终接触最大Y值(此图表根据打印值自动调整最大Y值)。其目的是显示该区域内或附近的红色条。 以下是我当前对此图表的配置:Chart.js Js-Hightligh背景中的一个区域,chart.js,Chart.js,我需要用0.5和1.5之间的不同颜色高亮显示图表的固定区域 目前我的图表如下: 预期结果如下所示: 正如您在上图中所看到的,其目的是使用不同颜色的固定条,即始终接触最大Y值(此图表根据打印值自动调整最大Y值)。其目的是显示该区域内或附近的红色条。 以下是我当前对此图表的配置: configPotential = { type: 'bar', data: { labels: [], datasets: [{
configPotential = {
type: 'bar',
data: {
labels: [],
datasets: [{
data: [],
borderWidth: 0,
borderColor:'#E16972',
fill: true,
backgroundColor: "#E16972",
order: 1
}]
},
options: {
animation: {
duration: false, //remove animation
},
responsive: true,
tooltips: {
enabled: false
},
title: {
display: false
},
legend: {
display: false
},
elements: {
point:{
radius: 0
}
},
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'PSD (Hz/s²)'
},
ticks: {
beginAtZero: true,
suggestedMax: 0.2
}
}],
xAxes: [{
display: false,
},
{
gridLines : {
display : false
},
scaleLabel: {
display: false
},
type: 'linear',
ticks: {
beginAtZero: true,
autoSkip: false,
min: 0,
max: 0.5,
stepSize: 0.1,
}
}]
}
}
}
使用plugin Chart.Js注释解析-
config = {
type: 'bar',
data: {
labels: [],
datasets: [{
data: [],
borderWidth: 0,
borderColor:'#E16972',
fill: true,
backgroundColor: "#E16972",
order: 1
}]
},
options: {
animation: {
duration: false, //remove animation
},
responsive: true,
tooltips: {
enabled: false
},
title: {
display: false
},
legend: {
display: false
},
elements: {
point:{
radius: 0
}
},
scales: {
yAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: 'PSD (Hz/s²)'
},
ticks: {
beginAtZero: true,
suggestedMax: 0.2
}
}],
xAxes: [{
display: false,
},
{
gridLines : {
display : false
},
scaleLabel: {
display: false
},
type: 'linear',
ticks: {
beginAtZero: true,
autoSkip: false,
min: 0,
max: 0.5,
stepSize: 0.1,
}
}]
},
annotation: {
drawTime: 'beforeDatasetsDraw',
annotations: [{
type: 'box',
xScaleID: 'x-axis-1',
yScaleID: 'y-axis-1',
xMin: 0.5,
xMax: 0.15,
yMin: 0,
backgroundColor: 'rgba(195,207,221, 0.5)',
borderColor: 'rgba(195,207,221, 0.5)',
}]
}
}
}