我正在使用Chart.js
版本3.7.0
来绘制图表。
我使用以下代码创建了一个类似于图像的图形。我只想将红框中的线表示为基于Y
轴的法线。
const myChart = new Chart(context, {
type: 'bar',
data: {
labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange', 'Green', 'Purple', 'Orange'],
datasets: [{
label: '',
barPercentage : 0.05,
data: [80, 19, 3, 5, 2, 3, 30, 20, 30],
backgroundColor: [
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)'
],
borderColor: [
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)',
'rgba(241, 246, 0, 1)'
],
borderWidth: 0.1
},{
type : 'bubble',
data : [
{
x : 20,
y : 80,
r : 50
},
{
x : 40,
y : 19,
r : 20
},
{
x : 60,
y : 3,
r : 1
},
{
x : 80,
y : 5,
r : 20
},
{
x : 100,
y : 2,
r : 5
},
{
x : 120,
y : 3,
r : 5
},
{
x : 140,
y : 30,
r : 20
},
{
x : 140,
y : 20,
r : 20
},
{
x : 140,
y : 30,
r : 50
}
],
backgroundColor: 'rgba(148, 181, 115, 0.7)',
borderColor : 'rgba(228, 248, 188, 0.92)'
}]
},
options: {
responsive : false,
plugins : {
legend : {
display : false
},
chartAreaBorder: {
borderColor: 'rgba(255, 255, 255, 0.2)',
borderWidth: 2,
}
},
scales: {
x : {
display : false,
max : 100,
min : 0,
ticks : {
stepStze : 10,
callback : () => ('')
},
grid : {
drawTicks : false,
color : 'rgba(255, 255, 255, 0.2)',
borderWidth : 2
}
},
y : {
max : 100,
min : 0,
ticks : {
stepSize : 5,
callback : () => ('')
},
grid : {
drawTicks: false,
drawBorder : true,
color : 'rgba(255, 255, 255, 0.2)',
borderDash : [5,5],
borderDashOffset : 2,
borderWidth : 2
}
}
},
interaction : {
mode : 'index'
},
},
plugins: [chartAreaBorder]
});};
我已经尝试使用callback()
或查找并应用 a plugin
,但它并没有给我想要的结果。我应该如何添加代码?