Chart.js＆Angular 2 - ng2-charts自定义点击事件

Question

我想在我的Angular 2项目中实现ng2图表，并且想知道如何创建自定义的onclick事件。意思是，我想覆盖购物车上的当前onclick事件来执行一些自定义功能（重定向到页面，模态显示等）。

有没有简单的方法来做到这一点？它是否构建在所有？

任何有识之士将不胜感激它

Answer 1

尝试读取DOCS

他们使用的非常好，简单易懂的解释。

有-均内置2事件处理程序：

活动

chartClick：当发生点击图表上的火灾，返回关于活性部位，并标记

chartHover：火灾当mousemove（悬停）出现在图表上时，返回有关活动点和标签的信息

---

在代码中，它看起来像：

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

Answer 2

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

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

Answer 3

我希望我的回答是正确的。之后我发现的唯一解决方案相比，搜索是：

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

Answer 4

我发现这个解决方案在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) 
    } 
} 
}