我正在尝试在我的Angular 2项目中实现ng2-charts,我想知道如何创建自定义onclick事件。意思是,我想覆盖购物车上当前的onclick事件来做一些自定义功能(重定向到页面,有一个模态显示等)。
有一个简单的方法吗?它是否内置了?
任何见解都会受到赞赏
尝试阅读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等。
我在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)
}
}
}
public chartClicked(e: any): void {
console.log(e);
}
e.active[0]._model
和e.active[0]._view
包含有关您单击的图表部分的信息(即label
)。
我希望我的回答是正确的。经过多次搜索我发现的唯一解决方案是:
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)
}}