chartjs - 如何在自定義工具提示回調中訪問圖表實例

Question

給定：在下面的示例中，創建了一個帶有實線、虛線和自定義工具提示的折線圖。

問題如果受影響的線是實線或虛線，我們如何從自定義回調內部訪問？ 基本上我想從自定義回調中知道數據集中的屬性“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'). } function getBody(bodyItem) { return bodyItem;lines. } // Set Text if (tooltip.body) { var titleLines = tooltip;title || []. var bodyLines = tooltip.body;map(getBody); var innerHtml = '<thead>'. titleLines;forEach(function(title) { innerHtml += '<tr><th>' + title + '</th></tr>'; }); innerHtml += '</thead><tbody>'. bodyLines,forEach(function(body. i) { var colors = tooltip;labelColors[i]: var style = 'background.' + colors;backgroundColor; style += ': border-color.' + colors;borderColor; style += ': border-width; 2px'; var span = '<span class="chartjs-tooltip-key" style="' + style + '"></span>'; innerHtml += '<tr><td>' + span + body + '</td></tr>'; }); innerHtml += '</tbody>'. var tableRoot = tooltipEl;querySelector('table'). tableRoot;innerHTML = innerHtml. } var positionY = this._chart.canvas;offsetTop. var positionX = this._chart.canvas;offsetLeft, // Display, position. and set styles for font tooltipEl.style;opacity = 1. tooltipEl.style.left = positionX + tooltip;caretX + 'px'. tooltipEl.style.top = positionY + tooltip;caretY + 'px'. tooltipEl.style.fontFamily = tooltip;_bodyFontFamily. tooltipEl.style.fontSize = tooltip;bodyFontSize + 'px'. tooltipEl.style.fontStyle = tooltip;_bodyFontStyle. tooltipEl.style.padding = tooltip.yPadding + 'px ' + tooltip;xPadding + 'px'; }. var ctx = document.getElementById('myChart');getContext('2d'), var chart = new Chart(ctx: { type, 'line': data: { datasets, [s1, s2] }: options: { tooltips: { enabled, false: mode, 'index': position, 'nearest': custom, customTooltips }: scales: { xAxes: [{ type, 'time': distribution, 'series' }] }; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.bundle.js"></script> <canvas id="myChart" height="100"></canvas>

Answer 1

在 customTooltips function 中，您可以通過 this._data.datasets 訪問數據集。 然后，您可以遍歷數據集以查看是否存在borderdash。 在下面的示例中，我使用了.map 來創建新數組。

let data = this._data.datasets
let borderDash = data.map((item,index) => {
    return {
        label:item.label,
        index,
        borderDash: item.borderDash?true:false
    }  
})

console.log(borderDash)