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

【问题标题】：Hiding Chart.js line, but showing it's data in the tooltip隐藏 Chart.js 行，但在工具提示中显示它的数据
【发布时间】：2020-02-24 23:41:39
【问题描述】：

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

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

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

这可能吗？

【问题讨论】：

标签： javascript chart.js

【解决方案1】：

您可以为应该隐藏的dataset 定义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>

【讨论】：

谢谢！我们也可以将它用于条形图吗？因为即使我们隐藏了一个bar，它也不会腾出空间给另一个bar占用。
@Zahid Sattar：我会为条形图选择不同的方法，定义堆叠条形并将不可见值保持在零以下，同时将yAxis.ticks.min 保持为零。尝试一下，如果遇到困难，请发布一个新问题以获得帮助。