chartjs水平条形图获取每个条形的y位置

q3aa0525  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(199)

我有一个插件,它应该为数据集中的每个值渲染一个圆圈,高度与每个条形相同。
(索引)获取像素值
但这不是条的位置。

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位置?
现在我必须给予更多的细节,但我不知道如何更确切地解释这个问题,所以我写了这些东西。

ssgvzors

ssgvzors1#

我想你可以用dataset元素来表示y。
第一个

相关问题