单击圆环图中的元素

问题描述

我有一个带有 HTML 元素的圆环图。

我想在图表内单击元素时调用一个函数。

查看下面的屏幕截图。我用红色突出显示了该元素。

我知道我们可以在 chartJS onClick 对象中设置 options 事件，如

options: { onClick: click_chart_function }

而且我可以很好地获得图表 onclick event。但它与图表画布点击有关，但与元素本身无关。

非常感谢任何帮助。

---

下面的一些调试代码：

function click_chart_function(event,array){

    let click_elm = CHART.getElementAtEvent(event)  

     console.log(event,array,click_elm)
...

<canvas id="chart" width="250" height="250"></canvas>


<div id="chart-text-container">
   <div style="z-index: 1000 !important;" onclick="console.log('hello world - container');">
      <i style="z-index: 1000 !important;" class="icon" onclick="console.log('hello world - inner');"></i>
   </div>

   <div id="chart-text-size"></div>
   <div id="chart-text-label"></div>
</div>

#chart-text-container {
    margin-top: -165px; 
    margin-bottom: 120px; /* compensate -100px for below elements */
    display: none;
    text-align: center;
    z-index: 1000 !important;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）