ChartJS v2：点击坐标处的刻度值(时间刻度)

6jygbczu 于 2022-11-06 发布在 Chart.js

关注(0)|答案(2)|浏览(194)

我有一个基于时间的折线图，我试图在点击坐标处获得每个刻度的值。
我在ChartJS选项中指定的onClick函数：

onClick: function(event, elementsAtEvent)
{
    console.log(event, elementsAtEvent, this);
    var valueX = null, valueY = null;
    for (var scaleName in this.scales) {
        var scale = this.scales[scaleName];
        console.log(scale.id, scale.isHorizontal());
        if (scale.isHorizontal()) {
            valueX = scale.getValueForPixel(event.offsetX);
        } else {
            valueY = scale.getValueForPixel(event.offsetY);
        }
    }
    console.log(event.offsetX, valueX, null, event.offsetY, valueY);
},

JSF中间文件：https://jsfiddle.net/AllenJB/dmebo9g5/1/
上面的代码似乎适用于Y轴，但不适用于X轴（时间刻度）-无论您在图表中的哪个位置单击，它总是返回最后一个值。
我可能做错了什么？

chart.js

来源：https://stackoverflow.com/questions/37141313/chartjs-v2-scale-value-at-click-coordinates-time-scale

2条答案

按热度按时间

a1o7rhls1#

这段代码实际上运行得很好，唯一的问题是我查看了moment对象的_i值，以检查它的值（这是创建对象时用作初始输入的值，不一定是当前值）。
将console.log行更改为以下内容可产生预期/正确的结果：

console.log(event.offsetX, valueX.format('YYYY-MM-DD HH:mm:ss'), null, event.offsetY, valueY);

赞(0）回复(0）举报 2022-11-06

db2dz4w82#

如果要获取最接近的x轴值，可以使用以下方法：

onClick: function (event) {

    const activeElements = this.getElementsAtXAxis(event);
    const xval = this.scales['x-axis-0']._timestamps.data[activeElements[0]._index];

    console.log(xval)

}

赞(0）回复(0）举报 2022-11-06

我来回答

ChartJS v2：点击坐标处的刻度值(时间刻度)

2条答案

相关问题

热门标签

最新问答