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函数中，您可以通过此访问数据集_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)