獲取在rechart的懸停/工具提示數據

我想獲取由recharts生成的數據對象的內部和用於填充他們的工具提示（所以我可以在其他地方顯示）。下面的圖像顯示的獲取在rechart的懸停/工具提示數據

console.log(data.payload[0]);

經由放置在工具提示的內容的功能所獲得的輸出：

<Tooltip content={ this.showTooltipData.bind(this) } />

然而，任何企圖得到在對象組件（Object.keys（）返回預期的鍵）失敗，「不確定」或「空」引用（編輯爲LiverpoolCoder）：

showTooltipData = (data) => { 
    console.log(data.payload[0]); 
    console.log(data.payload[0].color); 
} 

Uncaught (in promise) TypeError: Cannot read property 'color' of undefined 
    at PlotCharts._this.showTooltipData (PlotCharts.js) (...)

我在這裏失去了一些東西？

它仍然看起來像一個簡單的數組。鑑於：

showTooltipData = (data) => { 
    if (typeof data.payload[0] !== 'undefined') { 
    // console.log(data.payload[0].then(function(payload){ payload.color })); 
    console.log(Object.keys(data.payload[0])); 
    console.log("dataKey = " + data.payload[0]["datakey"]); 
    } 
}

我看到，在日誌中（你可以在dataKey上面的輸出看不包含值）：

編輯：上面的代碼工作正常，「datakey 「是一個錯字 - 移到dataKey，它似乎工作。對於通過網絡搜索獲得相同問題的任何其他人 - 您必須在訪問數據之前檢查（如上所示）（存在數據） - 移動鼠標會不斷創建和銷燬數據。

來源

2017-03-22 Omortis

您確定將控制檯日誌swopping data.payload [0] .color在data.payload [0]相同的代碼行嗎？ – LiverpoolOwen

是的。上面編輯。這是你的意思嗎？ – Omortis

你似乎在使用承諾。嘗試輸出console.log（data.payload [0] .then（function（payload）{payload.color}））; – LiverpoolOwen

答案是從上面：

showTooltipData = (data) => { 
    if (typeof data.payload[0] !== 'undefined') { 
    console.log(Object.keys(data.payload[0])); 
    console.log("dataKey = " + data.payload[0]["dataKey"]); 
    } 
}

您在訪問之前檢查（typeof運算如上是單程）在數據的存在 - 移動鼠標圍繞創建並不斷破壞數據。

來源

2017-03-28 13:15:59 Omortis

獲取在rechart的懸停/工具提示數據

回答

相關問題