隐藏Chart.js行，但在工具提示中显示了它的数据

Question

我正在使用Chart.js库来构建图表。考虑以下Chart.js折线图：

因此，这里有2个数据集，一个用于红线，一个用于绿线。我想隐藏这些数据集之一红色的。这将导致红线不显示我想要的。

但是，我还想让工具提示显示两个数据集（包括隐藏数据集）的数据。

有可能吗？

Answer 1

您可以为应隐藏的borderColor: 'transparent'定义dataset。要在工具提示中仍然显示所需的彩色框，还必须定义一个相应的callback function。

new Chart(document.getElementById('myChart'), {
  type: 'line',
  data: {
    labels: ['Player 1', 'Player 2', 'Player 3', 'Player 4'],
    datasets: [{
      label: 'OK',
      borderColor: 'green',
      backgroundColor: 'lightblue',
      data: [32, 44, 29, 33]
    }, {
      label: 'NOK',
      borderColor: 'transparent',
      data: [26, 29, 35, 35],
      fill: false,
    }]
  },
  options: {
    responsive: true,
    legend: {
      display: false
    },
    tooltips: {
      mode: 'index',
      callbacks: {
        labelColor: tooltipItem => {
          var color = tooltipItem.datasetIndex == 0 ? 'green' : 'red';
          return {
            borderColor: color,
            backgroundColor: color
          }
        }
      }
    }
  }
});

canvas {
  max-width: 300px;
}

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