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');  }<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 函数中，您可以通过 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)