Chart.js 中的多标签工具提示

Question

最近我将一个依赖于 Chart.js 的旧项目从 v1 移到了 v2。

但我无法重新创建如下所示的多标签工具提示。

在 v1 中，此功能默认启用。有谁知道我必须更改什么选项才能存档。

到目前为止我的代码。

new Chart(document.getElementById('mainChart'), {
        type: 'line',
        data: {
          labels: labels,
          datasets: [
            { data: data, label: "Expenses", fill: false
          ]
        },
        options: {
          animation: { duration: 0 },
          hover: { animationDuration: 0 },
          responsiveAnimationDuration: 0
        }
      });

Answer 1

这可以通过工具提示部分的 mode 选项进行设置。将模式设置为 index 可能是您正在寻找的模式。

  new Chart(document.getElementById('mainChart'), {
    type: 'line',
    data: {
      labels: labels,
      datasets: [
        { data: data, label: "Expenses", fill: false }
      ]
    },
    options: {
      animation: { duration: 0 },
      hover: { animationDuration: 0 },
      responsiveAnimationDuration: 0,
      tooltips: { mode: 'index' }             
    }
  });

下面是 mode: 'index' 的示例：

new Chart(document.getElementById('chartJSContainer'), {
      type: 'line',
      data: {
        labels: ["1", "2", "3", "4", "5", "6"],
        datasets: [{
         data: [7, 11, 5, 8, 3, 7],
            label: "Income",
            fill: false,
            backgroundColor: 'rgb(54, 162, 235)',
            borderColor: 'rgb(54, 162, 235)',
          }, {
         data: [12, 19, 3, 5, 2, 3],
            label: "Expenses",
            fill: false,
            backgroundColor: 'rgb(255, 99, 132)',
            borderColor: 'rgb(255, 99, 132)',
          }
          ]
        },
        options: {
          animation: {
            duration: 0
          },
          hover: {
            animationDuration: 0
          },
          responsiveAnimationDuration: 0,
          tooltips: {
           mode: 'index'
          }
        }
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.bundle.min.js"></script>
<body>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
</body>

Chart.js 中的多标签工具提示

Multi label tool-tip in Chart.js

chart.js

chartjs-2.6.0