我有一个插件,它应该为数据集中的每个值渲染一个圆圈,高度与每个条形相同。
(索引)获取像素值
但这不是条的位置。
const data ={
labels:[
"Macht",
"Ehre",
"Besitz",
[
"Selbst-",
"verwirklichung"
],
"Wettbewerb",
"Dienen",
"Spiritualität"
],
"datasets": [
{
"label": "first",
"backgroundColor": "rgb(208,55,25)",
"data": [
4,
8,
5,
4,
1,
1,
3
]
},
{
"label": "second",
"backgroundColor": "rgb(240,223,89)",
"data": [
1,
4,
5,
2,
5,
3,
3
]
}
]
}
const circles = {
id: 'circles',
afterDraw(chart, args, options) {
const {ctx, scales:{x,y}} = chart;
options.data.forEach((dataset) => {
let even = true
dataset.data.forEach((value,index) => {
var xpos = x.getPixelForValue(value);
var ypos = chart.scales.y.getPixelForValue(index) //HERE I WANT THE Y POSITION OF EACH BAR
ctx.save();
ctx.fillStyle = dataset.backgroundColor;
ctx.beginPath();
ctx.arc(xpos, ypos, 10, 0, 2 * Math.PI);
ctx.fill();
ctx.stroke();
ctx.restore();
})
})
}
}
const chartOptions = {
maintainAspectRatio: false,
responsive:true,
indexAxis: 'y',
scales: {
x:{
min: 1,
max: 9,
},
y:{
ticks: {
stepSize: 1,
autoSkip: false,
},
min: 0,
max: 6,
position: 'left',
},
},
plugins: {
circles: {
data: [
{
"label": "Selbseinschätzung",
"backgroundColor": "rgb(208,55,25)",
"data": [
6,
4,
3,
7,
4,
4,
7
]
},
{
"label": "Selbseinschätzung",
"backgroundColor": "rgb(240,223,89)",
"data": [
7,
4,
4,
3,
6,
5,
2
]
}
]
}
}
}
const ctx = document.getElementById('mts').getContext('2d');
const myChart = new Chart(ctx, {
type: 'bar',
data: data,
options: chartOptions,
plugins: [circles]
});
[![在此处输入图像说明][1]][1]
如何获得棒的y位置?
现在我必须给予更多的细节,但我不知道如何更确切地解释这个问题,所以我写了这些东西。
1条答案
按热度按时间ssgvzors1#
我想你可以用dataset元素来表示y。
第一个