Chart.js＆Angular 2 - ng2-charts自定義點擊事件

我想在我的Angular 2項目中實現ng2圖表，並且想知道如何創建自定義的onclick事件。意思是，我想覆蓋購物車上的當前onclick事件來執行一些自定義功能（重定向到頁面，模態顯示等）。Chart.js＆Angular 2 - ng2-charts自定義點擊事件

有沒有簡單的方法來做到這一點？它是否構建在所有？

任何有識之士將不勝感激它

來源

2016-07-14 blubberbo

嘗試讀取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等

來源

2016-07-14 16:20:29

是的，我看到了，謝謝。從哪件作品中獲取數據實際上是點擊了什麼？例如，如果你點擊一個欄（或者一塊餅），你怎麼能從ng2傳遞的$ event中訪問這些數據呢？我似乎無法通過它所傳遞的$事件的控制檯來查找 – blubberbo

肯定的，在點擊或懸停隨機圖表時，您有不同的'_index'-es。 'e.active [0] ._ index' –

謝謝。我可以看到e.active [0]，但在那裏找不到實際數據。意思是，我怎麼能從那個事件告訴哪個實際的按鈕被點擊了？ – blubberbo

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

e.active[0]._model和e.active[0]._view包含有關您點擊的圖表部分的信息（即label）。

來源

2017-03-31 09:25:22 Joris

我希望我的回答是正確的。之後我發現的唯一解決方案相比，搜索是：

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-29 16:17:03 rudighert

我發現這個解決方案在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-05 19:57:10

Chart.js＆Angular 2 - ng2-charts自定義點擊事件

回答

相關問題