ChartJS 3获取堆叠垂直条的高度答案

【问题标题】：ChartJS 3 get height of stacked vertical barChartJS 3获取堆叠垂直条的高度
【发布时间】：2021-06-01 23:56:46
【问题描述】：

好的。因此，我尝试将 ChartJS 与 Datalabels 2.0 (RC) 一起使用来显示堆叠垂直条的标签。当条形图很小时，我希望这些标签出现在它之外。

现在这是我正在使用的代码：https://codepen.io/meexo/pen/xxqpELL

我遇到的问题是在数据集上使用getProps，我无法检索每个条的高度。在上面的示例中，我尝试使用 ChartJS 3 中引入的 getProps() 来获取高度。如果我使用 console.log 它，我会看到各种参数，包括高度（尽管未定义）。高度参数未定义，我做错了什么？

我还尝试对代码使用getProps().y 参数，但在这种情况下，它似乎只适用于堆叠条的一部分，而不是全部。而我想要的是当全高低于我的阈值时，标签出现在堆叠条的上方。

有什么想法吗？

顺便说一句，虽然这是我的第一个问题，但绝对不是我在 StackOverflow 上找到的第一个答案 :)

我的代码：

var ctx = document.getElementById("myChart");
Chart.register(ChartDataLabels);
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'red'
        }, {
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: 'blue'
        }]
    },
    options: {
        scales: {
            x: {
                stacked: true
            },
            y: {
                stacked: true
            }
        },
        plugins: {
            datalabels: {
                anchor: context => {
                    let bar = context.chart.getDatasetMeta(context.datasetIndex).data[context.dataIndex].getProps().height;
                    document.getElementById('myHeight').innerHTML = bar;
                    const threshold = 6;

                    if (bar + threshold > context.chart.chartArea.bottom) {
                        return 'end'
                    }
                    return 'center'
                }
            }
        }
    }
});

【问题讨论】：

好的。所以我试图走另一条路来获得酒吧的高度。使用 onClick 处理程序来获取点击栏的高度。仍然未定义。查看笔并尝试点击栏：codepen.io/meexo/pen/gOmoGJw
嗨，也许这可以为您指明正确的方向stackoverflow.com/questions/45765886/…。 getElementAtEvent 方法似乎不起作用，但也许你会发现一些可能有帮助的东西。我正在修改你的 codepen，但我似乎也没有得到 bar 的高度（我可以得到宽度但不能得到高度）
@JacckMark 实际上我之前找到了这个答案，并用作我的第二个 Codepen（在 cmets 中）的起点。但由于我使用的是 ChartJS 3（不是 2.6），因此 getElementAtEvent 已被弃用。

标签： javascript chart.js

【解决方案1】：

行为来自代码中的这一部分：

const properties = {
        horizontal,
        base: vpixels.base,
        enableBorderRadius: !stack || isFloatBar(parsed._custom) || (me.index === stack._top || me.index === stack._bottom),
        x: horizontal ? vpixels.head : ipixels.center,
        y: horizontal ? ipixels.center : vpixels.head,
        height: horizontal ? ipixels.size : undefined,
        width: horizontal ? undefined : ipixels.size
      };

它将height 设置在undefined 上用于普通条形图，将width 设置在undefined 上用于水平条形图。放入 pr (https://github.com/chartjs/Chart.js/pull/9208) 进行修复，所以这应该在 chart.js 的下一个版本中修复

然后要获取条形高度，您必须将模式更改为index，然后您可以使用此函数获取条形总高度：

onClick: function(event) {
        var bar = this.getElementsAtEventForMode(event, 'index', {intersect: true}, true);
        if (!bar.length) return; //return if not clicked on bar
        var barHeight = bar.reduce((acc , val) => (acc + val.element.height), 0)
        document.getElementById('myHeight').innerHTML = barHeight;
      }

示例：https://codepen.io/leelenaleee/pen/qBrpLjX

【讨论】：

哦，我只是想写一个关于你的提交的答案。还提供了一个临时修复：使用element.y - element.base 获取条的高度。这目前确实有效。