Chart.js 4如何获取柱状图的X坐标（无需插件）

基础场景与现有实现 #

我使用Chart.js v4.2.1，基础条形图代码如下：

<html>
<head>
    <meta charset="utf-8" />
    <title>Bar chart</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div>
        <canvas id="barchart"></canvas>
    </div>
</body>
<script type="text/javascript">
    var canvas = document.getElementById('barchart');
    var chart = new Chart(canvas,
    {
        type: 'bar',
        data:
        {
            labels: ["Audi", "VW", "KIA"],
            datasets:
            [
              {
                  label: "Cars",
                  backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f"],
                  data: [2601, 4769, 602],
               },
            ],
        },
    });
</script>
</html>

目前已实现：

• 通过chart.data.datasets[0].data.length获取柱子数量（结果为3）
• 通过chart.data.datasets[0].data[0]获取第一个柱子的Y值（结果为2601）

问题：如何获取柱子的X坐标？ #

我不想使用任何插件，请问如何获取柱子的X像素坐标？

解决方案 #

对于Chart.js的条形图，X轴为类别轴，每个柱子对应一个类别的索引或标签，可通过X轴实例的getPixelForValue方法获取对应柱子的中心X像素坐标：

获取指定柱子的X坐标 #

• 通过索引获取（推荐，更稳定）：

  // 获取第一个柱子的X坐标（索引0对应"Audi"）
  const firstBarX = chart.scales.x.getPixelForValue(0);
  

• 通过标签文本获取：

  // 获取标签为"Audi"的柱子的X坐标
  const audiBarX = chart.scales.x.getPixelForValue("Audi");
  

补充场景：自定义Y轴时的轴初始化问题 #

当自定义yAxisID后，出现chart.scales.y未定义但chart.scales.x正常的情况，示例代码如下：

<html>
<head>
    <meta charset="utf-8" />
    <title>Bar chart</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/chart.js"></script>
</head>
<body>
    <div>
        <canvas id="barchart"></canvas>
        <div id="debug"></div>
    </div>
<script type="text/javascript">
    var canvas = document.getElementById('barchart');
    var chart = new Chart(canvas,
    {
        type: 'bar',
        data:
        {
            labels: ["Audi", "VW", "KIA"],
            datasets:
            [
                {
                    label: "Cars",
                    backgroundColor: ["#3e95cd", "#8e5ea2", "#3cba9f"],
                    data: [2601, 4769, 602],
                    yAxisID: "cars",
                },
            ],
        },
        options:
        {
            scales:
            {
                cars:
                {
                    position: "left",
                    ticks:
                    {
                        color: "red",
                    },
                    grid:
                    {
                        display: true,
                    },
                },
            },
        },
    });
    var dataSets = chart.data.datasets;
    var xPos = chart.scales.x.getPixelForValue(dataSets[0].data[0]);
    try
    {
        var yPos = chart.scales.cars.getPixelForValue(dataSets[0].data[0]);    // --> here y is undefined
        document.getElementById("debug").innerHTML = "xPos=" + xPos + ", yPos=" + yPos;
    }
    catch(e)
    {
        document.getElementById("debug").innerHTML = "xPos=" + xPos + "<br>" + e;
    }
</script>
</body>
</html>

问题原因与修复 #

直接在Chart实例创建后调用轴的getPixelForValue可能报错，因为图表初始化是异步过程，轴可能未完全初始化。需等待图表渲染完成后再执行相关操作，使用chart.ready()方法：

chart.ready(() => {
  var dataSets = chart.data.datasets;
  // 注意：X轴用索引获取，而非数据值
  var xPos = chart.scales.x.getPixelForValue(0); 
  try {
    var yPos = chart.scales.cars.getPixelForValue(dataSets[0].data[0]);
    document.getElementById("debug").innerHTML = "xPos=" + xPos + ", yPos=" + yPos;
  } catch(e) {
    document.getElementById("debug").innerHTML = "xPos=" + xPos + "<br>" + e;
  }
});

内容的提问来源于stack exchange，提问作者Johnny