使Chart.js在悬停时呈现散点图中各点之间的线

fnatzsnv  于 2022-11-06  发布在  Chart.js
关注(0)|答案(1)|浏览(189)

我有一个包含两个数据集的简单散点图:* 主动 * 和 * 被动 *:

const data = {
  "datasets": [{
      "label": "Active",
      "sentences": [
        "A1",
        "A2",
        "A3"
      ],
      "data": [
        [
          "0.4340433805869016",
          "0.12813240157479788"
        ],
        [
          "-0.39983629799199083",
          "0.12125799115087213"
        ],
        [
          "-0.04289228113339527",
          "0.10106119377169194"
        ]
      ],
      "borderColor": "#43a047",
      "backgroundColor": "#7cb342"
    },
    {
      "label": "Passive",
      "sentences": [
        "P1",
        "P2",
        "P3"
      ],
      "data": [
        [
          "0.4295487808020268",
          "0.19271652809947026"
        ],
        [
          "-0.4438451670978469",
          "-0.08848766134414247"
        ],
        [
          "-0.10789534989054622",
          "0.08013654263956245"
        ]
      ],
      "borderColor": "#1e88e5",
      "backgroundColor": "#039be5"
    }
  ],
  "labels": []
};

new Chart(document.getElementById("sentences"), {
  type: "scatter",
  data: data,
  options: {
    responsive: true,
    plugins: {
      legend: {
        position: "top",
      },
      tooltip: {
        callbacks: {
          label: ctx => ctx.dataset.sentences[ctx.dataIndex]
        }
      }
    }
  }
});

https://jsfiddle.net/br5dhpwx/)(英文)
目前,这一渲染效果很好:

但是,我想在鼠标悬停时在相应的数据点之间画一条线。即A1-P1、A2-P2、A3-P3等。
它应该看起来像这样:

I tried to use the setHoverStyle event,但到目前为止,还没有成功。

gab6jxml

gab6jxml1#

您可以为此使用自定义插件:
第一个

编辑:

由于某种原因,创建中的堆栈片段可以工作,但本身并不像这样,所以这里有一个小提琴链接:https://jsfiddle.net/Leelenaleee/btux41dz/

相关问题