javascript 获取chart.js 4中条形的X坐标

xj3cbfub  于 2023-02-21  发布在  Java
关注(0)|答案(1)|浏览(122)

我使用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。为了得到第一个条的Y值,我执行chart.data.datasets[0].data[0],得到2601。

***我如何获得条的X值(X坐标)?***(我对使用任何插件都不感兴趣)。
**已添加:**下面是一个示例,其中定义了chart.scales.x,但没有定义chart.scales.y。当我添加完成工作所需的yAxisID时,会发生这种情况。

<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>
dbf7pr2w

dbf7pr2w1#

您可以使用以下代码:chartInstance.scales.x.getPixelForValue(chart instance.data.labels[labelIndex]

相关问题