javascript - 隐藏 Chart.js 行，但在工具提示中显示其数据

Question

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

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

但是，我还想要的是工具提示应该显示两个数据集(包括隐藏数据集)的数据。

这可能吗？

Answer 1

您可以为应隐藏的数据集定义borderColor: 'transparent'。为了仍然在工具提示中呈现所需的彩色框，您还必须定义相应的 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>