Javascript 可以在Chart.Js中调用指令吗?
在angular JS和chart.JS中,可以在悬停时显示工具提示,甚至在单击条形图时调用函数(假设您使用的是chart.JS中的条形图) 但是,在单击条形图时是否可以调用指令?或者我应该为此使用canvas.js吗Javascript 可以在Chart.Js中调用指令吗?,javascript,angularjs,charts,frontend,Javascript,Angularjs,Charts,Frontend,在angular JS和chart.JS中,可以在悬停时显示工具提示,甚至在单击条形图时调用函数(假设您使用的是chart.JS中的条形图) 但是,在单击条形图时是否可以调用指令?或者我应该为此使用canvas.js吗 我提到的指令是定制的,它会弹出一个包含一些值的窗口。它不一定是指令,甚至可以是单击图表中的一个条形图后调用的角度分量。我通过查看图表找到了问题的答案 在Chart.js的标准构建第3727行提供了方法.getElementAtEvent。此方法返回单击的“图表元素”。这里有足够的
我提到的指令是定制的,它会弹出一个包含一些值的窗口。它不一定是指令,甚至可以是单击图表中的一个条形图后调用的角度分量。我通过查看图表找到了问题的答案 在Chart.js的标准构建第3727行提供了方法
.getElementAtEvent
。此方法返回单击的“图表元素”。这里有足够的数据来确定在单击的数据集的深入视图中显示哪些数据
在图表返回的数组的第一个索引上。getElementAtEvent
是一个值\u datasetIndex
。此值显示单击的数据集的索引
我相信,被点击的特定条是由值\u index
标注的。在我问题中的示例中,\u index
将指向图表配置数据标签中的一个
我的handleClick
函数现在如下所示:
function handleClick(evt)
{
var activeElement = chart.getElementAtEvent(evt);
…其中,chart
是chart.js在执行以下操作时创建的图表的参考:
chart = new Chart(canv, chart_config);
因此,通过单击选择的特定数据集如下所示:
chart_config.data.datasets[activeElement[0]._datasetIndex].data[activeElement[0]._index];
就在这里。我现在有了一个数据点,可以从中构建查询,以显示单击的条的数据。这可能会对您有所帮助。下面是一个工作示例
[
根据我所研究和制作的,这个场景似乎是不可能的。有三种类型的指令,即结构指令、组件指令和属性指令
我想要的是一个属性指令,但是属性指令里面并没有真正的html代码,它只是修改/添加DOM的行为
我想要做的最好的方法是创建一个组件,并通过将代码(clickChart)=“chartClick($event)”添加到画布中来获取click函数引发的事件
<canvas myChart [datasets]="myDataSetVar" (chartClick)="chartClick($event)">
通过调用chartClick函数并传递事件。如果您在console.log中记录事件,您可以仅从该事件中看到图表中的颜色、数据和许多内容。您甚至可以知道是否单击了数据集
因此,我没有使用指令,而是使用了一个ngIf来检查某个属性,该属性在单击图表中的数据集时变为true。然后,当该属性为true时,我显示DOM元素
因此,我的问题的简短回答是:不,您不能使用属性指令来执行我想要的操作。也许这可以帮助您这是上面一条注释中引用的重复项:,问题是从图表单击调用该特定指令,因为我已经生成了工具提示和弹出窗口。
<canvas myChart [datasets]="myDataSetVar" (chartClick)="chartClick($event)">