程序员经验分享-hwhale

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

2024-04-19

我有一个包含两个数据集的简单散点图：active and passive:

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/ https://jsfiddle.net/br5dhpwx/)

目前这渲染得很好：

但是，我想在鼠标悬停时在相应的数据点之间画一条线。 IE。 A1-P1、A2-P2、A3-P3 等

它应该看起来像这样：

我尝试使用setHoverStyle event https://stackoverflow.com/questions/73101049/line-drawn-from-sethoverstyle-event-disappears，但是到目前为止，还没有成功。


您可以为此使用自定义插件：

const EXPANDO_KEY = 'customLinePlugin';

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": []
};

const plugin = {
  id: "customLine",
  afterInit: (chart) => {
    chart[EXPANDO_KEY] = {
      index: null
    }
  },
  afterEvent: (chart, evt) => {
    const activeEls = chart.getElementsAtEventForMode(evt.event, 'nearest', {
      intersect: true
    }, true)

    if (activeEls.length === 0) {
      chart[EXPANDO_KEY].index = null
      return;
    }


    chart[EXPANDO_KEY].index = activeEls[0].index;
  },
  beforeDatasetsDraw: (chart, _, opts) => {
    const {
      ctx
    } = chart;
    const {
      index
    } = chart[EXPANDO_KEY];

    if (index === null) {
      return;
    }
    const dp0 = chart.getDatasetMeta(0).data[index]
    const dp1 = chart.getDatasetMeta(1).data[index]

    ctx.lineWidth = opts.width || 0;
    ctx.setLineDash(opts.dash || []);
    ctx.strokeStyle = opts.color || 'black'

    ctx.save();
    ctx.beginPath();
    ctx.moveTo(dp0.x, dp0.y);
    ctx.lineTo(dp1.x, dp1.y);
    ctx.stroke();
    ctx.restore();
  }
}

new Chart(document.getElementById("sentences"), {
  type: "scatter",
  data: data,
  options: {
    responsive: true,
    plugins: {
      customLine: {
        dash: [2, 2],
        color: 'red',
        width: 2
      },
      legend: {
        position: "top",
      },
      tooltip: {
        callbacks: {
          label: ctx => ctx.dataset.sentences[ctx.dataIndex]
        }
      }
    }
  },
  plugins: [plugin]
});
<body>
  <canvas id="sentences"></canvas>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.8.2/chart.js"></script>
</body>

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

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

chartjs

使 Chart.js 在悬停时在散点图中的点之间呈现一条线 的相关文章

随机推荐

  • Bootstrap 3 并排容器

    我正在尝试制作一个网页 其中内容的左半部分尊重引导程序 container最大宽度大小 而我的右侧可以一直到页面的末尾 作为 container fluid会工作 像这样的图片 到目前为止 我已经尝试了几种方法 目前我正在使用以下代码 di

  • 如何从 for 循环构建和填充 pandas 数据框？ [复制]

    这个问题在这里已经有答案了 这是我正在运行的代码的一个简单示例 我希望将结果放入 pandas 数据帧中 除非有更好的选择 for p in game players passing print p p team p passing att

  • AAD 团体声称某些用户的 JWT 令牌缺失

    我在 AAD 上遇到一些奇怪的行为 用户成功登录后 我们的 API 调用中某些用户收到未经授权的消息 结果发现 JWT 中的声明丢失了 一些用户获得 groups 声明 他所属的所有 groupId 的数组 一些用户获得 hasgroups

  • 如何在命令行中查看 git 存储库中的所有标签[重复]

    这个问题在这里已经有答案了 有类似 git show标签 之类的东西吗 git tag列出存储库中使用的标签 git tag l如果你使用 l您可以通过选项传递搜索模式来过滤掉标签

  • 在 django 中通过变量模型名称访问模型

    我有两个相同的模型 比如说 django 中的 X 和 Y 如下所示 class X models Model con models CharField max length 100 a models ForeignField FOO cl

  • Node/Busboy：获取文件大小

    我使用 Busboy 模块通过下面的 CoffeeScript 代码来解析多部分请求 有时 问题出在 数据 处理程序上 该处理程序针对包含一个文件的请求多次调用 这意味着我需要对每个尺寸进行求和才能得出整个尺寸 此外 文件 处理程序中的文件

  • 如何在 Haskell 中创建通道列表（或数组），如 Go

    我试图将 Haskell 与 Go 进行比较以获得一些并发示例 以下代码是 Go 中使用 Goroutines 和通道的简单映射缩减示例 以下 Go 代码计算平方和 1 2 2 2 3 2 1024 2 为了测试Go和Haskell的性能

  • 网络适​​配器无法在 SQL Developer 中建立连接

    我使用包含 1000 个条目的 SQL 开发人员列表创建了一个数据库 并且创建成功 连接也成功了 但今天当我尝试连接时出现错误 IO Error The Network Adapter could not establish the con

  • 通过python3计算uniswap 3.0池（对）地址

    我遇到了一个关于如何计算的问题 新的 uniswap 版本 3 池 早期版本称为pair 地址基于1 https github com Uniswap v3 sdk blob aeb1b09 src utils computePoolAdd

  • 如何跨 NodeJs 应用程序和模块正确重用与 Mongodb 的连接

    我一直在阅读和阅读 但仍然对跨整个 NodeJs 应用程序共享相同数据库 MongoDb 连接的最佳方式感到困惑 据我了解 连接应该在应用程序启动时打开并在模块之间重用 我目前认为最好的方法是server js 一切开始的主文件 连接到数据

  • 当我执行 npm install [重复] 时，Node js 添加不需要的模块

    这个问题在这里已经有答案了 我正在尝试在我的 Mac 上启动节点服务 当我在节点服务所在的文件夹中运行 npm install 时 它正在安装 package json 中未提及的模块 有一些我不期望的额外模块 以及一些我期望的模块丢失了

  • 在perl中串行处理XML数据

    我想知道在我的情况下 哪种 XML 解析器最适合 Perl 我读了很多书并尝试过XML LibXML and XML SAX 第一个使用了太多内存 第二个对我来说似乎没有那么快 即使在关闭纯 Perl 解析器之后 我的需求相当具体 我通过以

  • 如何对函数的返回值进行单元测试 - Angular (Jasmine/Karma)

    我想知道是否有一种方法可以正确测试 Angular 中函数的返回值 我想本质上测试一个测试的返回值是否正确 并编写另一个测试来测试相反的场景 Ts 组件 get if this object undefined return true el

  • 如何在 MVC 中通过 JQuery 调用 HttpHandler

    我以前没有在 MVC 中使用过 httpHandlers 但是我想在我的应用程序中停止会话超时 我在这里找到了解决方案 http www dotnetcurry com ShowArticle aspx ID 453 http www do

  • .net 中 Tuple(T1)/Singleton 的用途是什么？

    net 4 中的元组类型之一是单元素元组 http msdn microsoft com en us library dd384265 aspx 我只是想知道这个结构的目的是什么 我看到的唯一用途是在使用时8 Tuple http msdn

  • 使用 RecursiveDirectoryIterator 在顶部按最新日期对文件进行排序

    现在默认情况下它按字母表显示 我不希望这样 我想使用以下方式对文件进行排序递归目录迭代器最新文件位于顶部 按降序排列 还使用if 条件比较日期并获取该日期的文件

  • 设置预定义的节点样式？

    在过去的 15 分钟里 我一直在谷歌上搜索 试图找到这个问题的答案 但我似乎无法弄清楚 我的任务是为我在工作中开发的一些应用程序构建一些小流程图 他们不需要任何花哨的东西 因为他们将在 vizio 中将其转换为他们喜欢的格式 他们甚至说我们

  • VB6 UDT 自检

    我有一种感觉 这个问题的答案将是 不可能 但我会尝试一下 我的处境并不令人羡慕 需要修改旧版 VB6 应用程序并进行一些增强 转换为更智能的语言不是一个选择 该应用程序依赖大量用户定义类型来移动数据 我想定义一个通用函数 它可以引用任何这些

  • PHPStorm + XDebug 设置演练

    直到最近 我一直在用 PHP 通过 Notepad 编写代码 并通过检查 IIS 中的日志进行调试 一定喜欢那个 Web 平台安装程序 从那时起 我决定更新到更高效的代码编写 测试环境 并在使用 PHPStorm 玩了一会儿之后 决定购买它

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

    我有一个包含两个数据集的简单散点图 active and passive const data datasets label Active sentences A1 A2 A3 data 0 4340433805869016 0 12813

热门标签