动作选择器上的 chartist js：查找 ct-point 元素的坐标

Posted 2023-03-05

【中文标题】动作选择器上的 chartist js：查找 ct-point 元素的坐标

【英文标题】：chartist js on action selectors: finding coordinates for the ct-point element

【发布时间】：2017-05-03 14:52:12

【问题描述】：

基本上是从这里的主题 (How to show label when mouse over bar) 中汲取灵感，当我将鼠标悬停在 LINE 图表上时[示例是条形图]（即使我不是直接在该系列上），我想：

1) 获取我结束的系列点的值

2) 获取引用的css选择器

这样我就可以了

1) 显示值

2) 在元素上应用临时 CSS（如放大“point”元素）

我试图检查 ct-chart 对象，但任务被证明是艰巨的。

在实践中：

var addedEvents = false;
chart.on('draw', function() 
  if (!addedEvents) 
    $('.ct-bar').on('mouseover', function() 
      $('#tooltip').html('<b>Selected Value: </b>' + $(this).attr('ct:value'));
    );

    $('.ct-bar').on('mouseout', function() 
      $('#tooltip').html('<b>Selected Value:</b>');
    );
  
);

折线图案例中$(this).attr('ct:value') 的等价物是什么？

在图片中（忘记线了，我稍后再处理）：

来自：

到：

【问题讨论】：

那么你的问题是什么？

获取 ct 点的选择器并获取 ct:value 的值，如链接示例中所示。添加编辑以澄清

悬停在图表中的每个元素上？此外，您似乎可以在鼠标悬停时看到这些值。

添加图片说明

【参考方案1】：

document.querySelectorAll(".ct-point") //select all points in the chart

拥有它们后，您可以使用以下方法检索值：

point.getAttribute("ct:value");

同样，您可以选择网格线等。