程序员经验分享-hwhale

使用 ChartJS 更改点击时的点颜色

2024-01-18

目前，当您单击单个点（折线图上）时，我可以更改它的颜色，但它会立即变回以前的颜色，我该如何防止这种情况发生？

这是我的功能：

var options = {
  onClick: function(e){
    var element = this.getElementAtEvent(e);
    if (element.length > 0) {
      element[0]._view.backgroundColor = '#FFF';
      this.update();
    }
}

我在这里发现了同样的问题https://github.com/chartjs/Chart.js/issues/2989 https://github.com/chartjs/Chart.js/issues/2989显然这个人能够管理它，但我认为该代码不再兼容。

我正在使用 ChartJS v2.5.0。


下面的方法利用：

  • the pointBackgroundColordataset 属性，一个保存点当前颜色的数组。单击某个点时，关联的数组值将更改为white并且图表将会更新。
  • the onClick图表选项，一个“如果事件类型为‘mouseup’或‘click’则调用的函数”。它“在图表的上下文中调用并传递事件和活动元素数组”。

更多内容请见docs http://www.chartjs.org/docs/.

长故事代码：

var ctx = document.getElementById("myChart");
var myChart = new Chart(ctx, {
  type: 'line',
  data: {
    labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
    datasets: [{
      label: '# of Votes',
      data: [72, 49, 43, 49, 35, 82],
      pointBackgroundColor: ["red", "blue", "yellow", "green", "purple", "orange"]
    }]
  },
  options: {
    onClick: function(evt, activeElements) {
      var elementIndex = activeElements[0]._index;
      this.data.datasets[0].pointBackgroundColor[elementIndex] = 'white';
      this.update();
    }
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.min.js"></script>
<canvas id="myChart" width="400" height="400"></canvas>

还有一把可以玩的小提琴。 https://jsfiddle.net/rm6abn2t/

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

javascript

chartjs

使用 ChartJS 更改点击时的点颜色 的相关文章

随机推荐

  • 如何获取元素的事件监听器

    有没有办法使用 HTML 页面上的 JavaScript 获取该页面上某个元素的所有事件侦听器的列表 注意 我知道我们可以使用 Chrome 开发工具事件侦听器查看它们 但我想使用页面的 JavaScript 来记录 访问查看列表 另外 我

  • 在 WPF 中动态添加网格和控件

    我现在正在制作一个显示系统中硬盘使用情况的应用程序 为此 我想动态生成网格和控件 如进度条和标签 以显示用法 是否有任何 XAML 模板可用于此目的 我使用以下代码在我的代码中动态生成控件 Label drivesLabel Label p

  • Django 表单选择字段的初始值被忽略

    我有这个表格 class UserUsesSourceForm forms Form some fields here username forms CharField label Username max length 30 help t

  • 如何推送到容器上的 git 服务器？

    在我的主机上 我可以创建第二个用户 admin and push使用以下命令到该用户的 git 文件夹 admin localhost folder 当我创建托管 git 服务器的 Docker 容器时 在公开之后port 22我如何git

  • 当 wpf 数据网格单元格中的值使用 MVVM 更改时如何引发事件？

    我需要使用 MVVM 设计模式的 wpf 数据网格方面的帮助 我有一个绑定到可观察集合的 datagid 网格中的第一列包含无法编辑的十进制值 第二列包含一个文本框 必须在其中输入十进制值 第三列必须显示第一列中的值与输入的第二列中的值之间

  • 在 ng-if 中调用 Javascript

    我有一些遗留的 jQuery 代码 这是一大块代码 所以我宁愿稍后再移植它 要使用它 我调用 legacyId legacyFunction 不过 事情是这样的 我有一个 ng if 在 ng if 中 我有 JavaScript 我可以在

  • 深入探讨：了解 Xcode 组和文件夹引用之间的区别

    StackOverflow 上的很多地方都已经提出并回答了这个问题 然而 我发现其中大多数虽然在技术上是正确的 但遗漏了一些具体细节 这些细节不仅解释了实际发生的情况 而且在尝试调试文件引用或构建问题时可能是有价值的信息 我决定根据杰夫 阿

  • jQuery / ASP MVC -- “$.ajax”调用中的解析器错误

    我想使用 jQuery 1 3 1 在 ASP Net MVC RC2 中创建一个简单的操作链接 如下所示 a href Tester a 与AjaxTest1功能 function AjaxTest1 ajax url Home Ajax

  • 如何创建 3D 散点图？

    我一直在用 C 对 3d 散点图进行一些研究 到目前为止我已经找到了一个library http www codeproject com KB WPF WPFChart3D aspx这对我来说有些作用 但是 不一定像我需要的那样灵活 由于我

  • 0x00007FF93E507A7A (ntdll.dll) 处引发异常。读取位置 0xFFFFFFFFFFFFFFFF 时发生访问冲突

    我正在使用 POCO lib 来工作网络 我使用 POCO JSON 的 JSON 数据 我的代码 User user context marshal as

  • 在 ASP.NET 中使用新会话 ID 打开新浏览器窗口

    我需要打开第二个浏览器窗口或选项卡 但它必须有不同的session ID 从 ASP NET 页面打开新的浏览器窗口很容易 但它共享相同的 cookie 因此session ID与原件 我怎样才能做到这一点 这是浏览器的限制 浏览器实例在运

  • 如何在 WPF 应用程序中设置 TextBlock 和 Label 的默认颜色、字体系列和字体大小？

    编辑 我想这个问题没有说得很清楚 它实际上由 4 个独立的部分组成 一个如何TextBlock如果客户端应用程序不提供任何样式 以编程方式或通过 xaml 获取其默认颜色 一个如何Label得到它的默认颜色 一个如何TextBlock如果客

  • Kafka Connect 无法通过 SSL 读取 Kafka 主题

    在我们的 docker swarm 中运行 kafka connect 并使用以下 compose 文件 cp kafka connect node image confluentinc cp kafka connect 5 1 0 por

  • 如何对自定义 JsonConverter 进行单元测试

    我有一个 json 负载 我想以一种不平凡的方式反序列化 destinationId 123 目标类是 public class SomeObject public Destination Destination get set publi

  • 使用 PHPMyAdmin 管理 Amazon RDS

    我无法让 PHPMyAdmin 连接到我的 Amazon RDS 实例 我已向数据库安全组授予我的 IP 地址的权限 该组有权访问我尝试访问的数据库 这就是我正在处理的 cfg Servers i pmadb dbname cfg Serv

  • 一个目录中有多少个子目录？

    如何查找HDFS中指定目录下的子目录数量 当我做hadoop fs ls mydir 我收到 Java 堆空间错误 因为目录太大 但我感兴趣的是该目录中的子目录数量 我试过 gsamaras gwta3000 hadoop fs find

  • 这个 CASE 表达式如何到达 ELSE 子句？

    我需要将一些测试数据加载到我的帐户表上的通道字段中 Channel 可以是 10 个不同值之一 所以我想我应该使用 a 随机分配 Channel 值之一CASE表达随着ABS CHECKSUM NewId 10像这样 SELECT id n

  • 如何以编程方式将函数添加到嵌套命名空间？

    假设我有一个函数 当我只传递一个字符串时 它会动态地为我创建命名空间 我很确定 YUI JS 库的作用 MyObj namespace fn method name 会导致 MyObj fn method name 正在创建 所有三个级别都

  • 如何使用此关键字获取 List> ？

    我有片段 我在列表中获取字符串并将其发送为Bundle到活动 例如 我获取一个字符串并通过以下方式将其发送到活动 public class ViewPagerAdapter extends FragmentStatePagerAdapter

  • 使用 ChartJS 更改点击时的点颜色

    目前 当您单击单个点 折线图上 时 我可以更改它的颜色 但它会立即变回以前的颜色 我该如何防止这种情况发生 这是我的功能 var options onClick function e var element this getElementA

热门标签