Chart.js&Angular 2 - ng2-charts定制点击事件

Question

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

有一个简单的方法吗？它是否内置了？

任何见解都会受到赞赏

Answer 1

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

Answer 2

尝试阅读DOCS

他们有很好的使用解释，可以理解。

内置两个事件处理程序：

大事记

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等。