Question

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

有一种简单的方法吗？它内置了吗？

任何见解都会受到赞赏

Answer 1

我在https://github.com/valor-software/ng2-charts/issues/489

找到了这个解决方案

/PDBALTPATH:pdb_file_name

Answer 2

尝试阅读 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是您的自定义函数，可能有其他名称，并执行自定义操作，例如显示模式，重定向到网址等。

Answer 3

 public chartClicked(e: any): void {
     console.log(e);
 }

e.active[0]._model和e.active[0]._view包含有关您点击的图表部分的信息（例如label）。

Answer 4

我希望我的回答是正确的。经过多次寻找我发现的唯一解决方案是：

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)
}}

Chart.js＆amp; Angular 2 - ng2-charts定制点击事件

4 个答案: