慕運(yùn)維8079593
2023-09-07 16:21:55
給定: 在下面的示例中,創(chuàng)建了帶有實(shí)線、虛線和自定義工具提示的折線圖。問(wèn)題 如果受影響的線是實(shí)線或虛線,我們?nèi)绾螐淖远x回調(diào)內(nèi)部訪問(wèn)?基本上我想從自定義回調(diào)中知道數(shù)據(jù)集中的屬性“borderDash”是否存在。var s1 = { label: 'A', data: [{ x: '2020-05-11T04:58:37Z', y: 25, }, { x: '2020-05-11T04:59:17Z', y: 27, }, { x: '2020-05-11T04:59:57Z', y: 21, }, { x: '2020-05-11T05:00:37Z', y: 21, }, { x: '2020-05-11T05:01:17Z', y: 21, }, { x: '2020-05-11T05:01:57Z', y: 0.04, } ], borderDash: [10, 5]};var s2 = { label: 'B', data: [{ x: '2020-05-11T04:58:37Z', y: 28, }, { x: '2020-05-11T04:59:17Z', y: 31, }, { x: '2020-05-11T04:59:57Z', y: 27, }, { x: '2020-05-11T05:00:37Z', y: 30, }, { x: '2020-05-11T05:00:57Z', y: 30, }, { x: '2020-05-11T05:01:17Z', y: 0.033, } ]};var customTooltips = function(tooltip) { //** //* QUESTION: How to get info if line is dotted or solid? //** // Tooltip Element var tooltipEl = document.getElementById('chartjs-tooltip'); if (!tooltipEl) { tooltipEl = document.createElement('div'); tooltipEl.id = 'chartjs-tooltip'; tooltipEl.innerHTML = '<table></table>'; this._chart.canvas.parentNode.appendChild(tooltipEl); } // Hide if no tooltip if (tooltip.opacity === 0) { tooltipEl.style.opacity = 0; return; } // Set caret Position tooltipEl.classList.remove('above', 'below', 'no-transform'); if (tooltip.yAlign) { tooltipEl.classList.add(tooltip.yAlign); } else { tooltipEl.classList.add('no-transform'); }<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script><canvas id="myChart" height="100"></canvas>
1 回答

www說(shuō)
TA貢獻(xiàn)1775條經(jīng)驗(yàn) 獲得超8個(gè)贊
在 customTooltips 函數(shù)中,您可以通過(guò) this._data.datasets 訪問(wèn)數(shù)據(jù)集。然后您可以循環(huán)遍歷數(shù)據(jù)集以查看 borderdash 是否存在。在下面的示例中,我使用 .map 創(chuàng)建新數(shù)組。
let data = this._data.datasets
let borderDash = data.map((item,index) => {
return {
label:item.label,
index,
borderDash: item.borderDash?true:false
}
})
console.log(borderDash)
添加回答
舉報(bào)
0/150
提交
取消