9

我正在尝试在我的 Angular 2 项目中实现 ng2-charts，我想知道创建自定义 onclick 事件。意思是，我想覆盖购物车上的当前 onclick 事件以执行一些自定义功能（重定向到页面、显示模式等）。

有没有一种简单的方法可以做到这一点？它是内置的吗？

任何见解将不胜感激

4

5 回答 5

19

我在https://github.com/valor-software/ng2-charts/issues/489找到了这个解决方案

public chartClicked(e: any): void {
if (e.active.length > 0) {
const chart = e.active[0]._chart;
const activePoints = chart.getElementAtEvent(e.event);
  if ( activePoints.length > 0) {
    // get the internal index of slice in pie chart
    const clickedElementIndex = activePoints[0]._index;
    const label = chart.data.labels[clickedElementIndex];
    // get value by index
    const value = chart.data.datasets[0].data[clickedElementIndex];
    console.log(clickedElementIndex, label, value)
  }
 }
}
于 2018-03-05T19:57:10.450 回答
11

尝试阅读DOCS

他们对使用有很好且易于理解的解释。

内置 2 个事件处理程序：

活动

chartClick：点击图表时触发，返回有关活动点和标签的信息

chartHover：在图表上发生鼠标移动（悬停）时触发，返回有关活动点和标签的信息

在代码中它看起来像这样：

 <base-chart class="chart"
            [datasets]="lineChartData"
            [labels]="lineChartLabels"
            [options]="lineChartOptions"
            [colors]="lineChartColours"
            [legend]="lineChartLegend"
            [chartType]="lineChartType"
            (chartHover)="chartHovered($event)"
            (chartClick)="chartClicked($event)"></base-chart>
  </div>

那是您chartHovered的chartClicked自定义函数，可以有其他名称，并执行自定义操作，例如显示模式、重定向到 url 等。

于 2016-07-14T16:20:29.220 回答
0 
 public chartClicked(e: any): void {
     console.log(e);
 }

e.active[0]._model并e.active[0]._view包含有关您单击的图表部分的信息（即label）。

于 2017-03-31T09:25:22.270 回答
0

我希望我的回答是正确的。经过大量搜索，我找到的唯一解决方案是：

public chartClicked(e:any):void {

if(e.active.length > 0){
  var points = [];
  var pointSelected = e.active[0]._chart.tooltip._model.caretY;
  var legends = e.active[0]._chart.legend.legendItems;

  for (var i = 0; i < e.active.length; ++i) {
    points.push(e.active[i]._model.y);
  }

  let position = points.indexOf(pointSelected);
  let label = legends[position].text

  console.log("Point: "+label)
}}
于 2017-08-29T16:17:03.977 回答
0

在检查了多个地方之后，我得到了它的点击事件。

HTML：

<div class="chart">
  <canvas
    baseChart
    [data]="pieChartData"
    [type]="pieChartType"
    [options]="pieChartOptions"
    [plugins]="pieChartPlugins"
    (chartHover)="chartHovered($event)"
  >
  </canvas>
</div>

TS：

public chartHovered(e: any): void {
    if (e.event.type == "click") {
      const clickedIndex = e.active[0]?.index;
      console.log("Clicked index=" + clickedIndex);
    }
}

参考

于 2022-01-08T22:20:15.460 回答