是否可以在 Chart.Js 中调用指令？答案

【问题标题】：Is it possible to call a directive in Chart.Js?是否可以在 Chart.Js 中调用指令？
【发布时间】：2020-05-25 16:07:45
【问题描述】：

在 Angular JS 和 chart.js 中，可以在悬停时显示工具提示，甚至可以在单击条形时调用函数（假设您使用的是来自 chart.js 的条形图）。

但是，当您单击条形图时是否可以调用指令？或者我应该为此使用 canvas.js 吗？

我所指的指令是自定义的，它会弹出一个包含一些值的窗口。它不一定是指令，它甚至可以是您在单击图表中的条形后调用的角度组件。

【问题讨论】：

也许这可以帮助你stackoverflow.com/questions/37122484/…

标签： javascript angularjs charts frontend

【解决方案1】：

通过查看Chart.js source code，我设法找到了我的问题的答案。

在 Chart.js 的第 3727 行提供的标准构建是方法 .getElementAtEvent。此方法返回我单击的“图表元素”。这里有足够的数据来确定要在点击的数据集的向下钻取视图中显示哪些数据。

chart.getElementAtEvent 返回的数组的第一个索引是一个值_datasetIndex。该值显示被点击的数据集的索引。

我相信，被点击的特定栏由值_index 标注。在我的问题示例中，_index 将指向One 中的chart_config.data.labels。

我的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];

你有它。我现在有一个数据点，我可以从中构建查询以显示被点击的栏的数据。

【讨论】：

这是在上述 cmets 之一中引用的重复项：stackoverflow.com/questions/37122484/…，问题是从图表单击中调用该特定指令，因为我已经制作了工具提示和弹出窗口。跨度>

【解决方案2】：

这可能会对您有所帮助。这是一个工作示例

[http://jsfiddle.net/80k0ojyh/]

let chart = Highcharts.chart('container', {
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
  },
  series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
  }]
});

chart.update({
  plotOptions: {
    series: {
      events: {
        click: (event) => {
          alert('you clicked something');
        },
      },
    },
  }
});

【讨论】：

【解决方案3】：

根据我的研究和制作，这种情况似乎是不可能的。指令分为三种类型，即结构指令、组件指令和属性指令。

我想要的是一个属性指令，但一个属性指令内部并没有真正的 html 代码，它只是修改/添加一个行为到 DOM。

实现我想要的最佳方法是创建一个组件并通过将代码 (clickChart) = "chartClick($event)" 添加到 Canvas 来获取 click 函数引发的事件

<canvas myChart [datasets]="myDataSetVar" (chartClick)="chartClick($event)">

通过调用 chartClick 函数并传递事件。如果你控制台记录事件，你可以从这个事件的图表中看到颜色、数据和很多东西。您甚至可以判断是否单击了数据集。

有了这个，我没有使用指令，而是使用了一个 ngIf 来检查某个属性，当单击图表中的数据集时该属性变为 true。然后当属性为真时显示 DOM 元素。

所以我的问题的简短回答是：不，你不能使用属性指令来做我想做的事。

【讨论】：