Chart.js 折线图固定工具提示

Question

是否可以在不悬停鼠标的情况下在固定的数据标签位置调用默认的 on-canvas 工具提示？

Answer 1

您可以像本例中那样调度悬停事件，来自答案：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.0.0/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script>
<button id="a">Hover a</button>
<button id="b">Hover b</button>
<button id="c">Hover c</button>
<button id="d">Hover d</button>
<button id="e">Hover all</button>
<canvas id="chart"></canvas>
<script>
  let c = new Chart($("#chart"), {
    type: "doughnut",
    data: {
      labels: ["a", "b", "c", "d"],
      datasets: [
        {
          data: [1, 2, 4, 8],
          backgroundColor: ["red", "blue", "green", "orange"]
        }
      ]
    }
  });
  console.log("chart drawn!");
  $("#a").on("click", function () {
    t(0);
  });
  $("#b").on("click", function () {
    t(1);
  });
  $("#c").on("click", function () {
    t(2);
  });
  $("#d").on("click", function () {
    t(3);
  });
  $("#e").on("click", function () {
    hoverAll();
  });

  function t(idx) {
    var meta = c.getDatasetMeta(0),
      rect = c.canvas.getBoundingClientRect(),
      point = meta.data[idx].getCenterPoint(),
      evt = new MouseEvent("mousemove", {
        clientX: rect.left + point.x,
        clientY: rect.top + point.y
      }),
      node = c.canvas;
    node.dispatchEvent(evt);
  }

  function hoverAll() {
    for (let i = 0; i < 4; i++) {
      console.log(i);
      t(i);
    }
  }
</script>

但是，悬停事件似乎是相互排斥的，这意味着您一次只能有一个，因为一次只有一个鼠标可以悬停在一个元素上。这就是为什么添加的 hoverall 按钮不起作用，并留下最后一个悬停元素。如果您想要显示图表的所有数据集和记录，数据标签插件似乎是正确的选择，正如评论中所建议的那样。

Answer 2

您可以像这样使用 setActiveElements 函数：

const options = {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        borderColor: 'pink',
        backgroundColor: 'pink'
      },
      {
        label: '# of Points',
        data: [7, 11, 5, 8, 3, 7],
        borderColor: 'orange',
        backgroundColor: 'orange'
      }
    ]
  },
  options: {}
}

const ctx = document.getElementById('chartJSContainer').getContext('2d');
const chart = new Chart(ctx, options);

document.getElementById("tt").addEventListener("click", () => {
  const {
    tooltip,
    chartArea
  } = chart;

  tooltip.setActiveElements([{
      datasetIndex: 0,
      index: 1
    },
    {
      datasetIndex: 1,
      index: 1
    }
  ]);

  chart.update();
});

<body>
  <button id="tt">
      Make tooltip active
    </button>
  <canvas id="chartJSContainer" width="600" height="400"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.5.1/chart.js"></script>
</body>

Chart.js 折线图固定工具提示

Chart.js Line chart fixed tooltip

chart.js