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.datasetslet borderDash = data.map((item,index) => {&nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; label:item.label,&nbsp; &nbsp; &nbsp; &nbsp; index,&nbsp; &nbsp; &nbsp; &nbsp; borderDash: item.borderDash?true:false&nbsp; &nbsp; }&nbsp;&nbsp;})console.log(borderDash)