Chart.js 中饼图的点击事件

2023-11-23

我有一个关于 Chart.js 的问题。

我使用提供的文档绘制了多个饼图。我想知道单击其中一个图表的某个切片是否可以根据该切片的值进行 ajax 调用?

例如,如果这是我的data

var data = [
    {
        value: 300,
        color:"#F7464A",
        highlight: "#FF5A5E",
        label: "Red"
    },
    {
        value: 50,
        color: "#46BFBD",
        highlight: "#5AD3D1",
        label: "Green"
    },
    {
        value: 100,
        color: "#FDB45C",
        highlight: "#FFC870",
        label: "Yellow"
    }
], 

我可以点击Red标记为 slice 并调用以下形式的 url:example.com?label=red&value=300?如果是,我该怎么办?


Update:正如@Soham Shetty 评论的那样,getSegmentsAtEvent(event)仅适用于 1.x 和 2.xgetElementsAtEvent应该使用。

.getElementsAtEvent(e)

查找事件点下的元素,然后返回所有元素 在相同的数据索引处。这在内部用于“标签”模式 突出显示。

Calling getElementsAtEvent(event)在您的 Chart 实例上传递一个 事件或 jQuery 事件的参数将返回点元素 与该事件处于同一位置。

canvas.onclick = function(evt){
    var activePoints = myLineChart.getElementsAtEvent(evt);
    // => activePoints is an array of points on the canvas that are at the same position as the click event.
};

例子:https://jsfiddle.net/u1szh96g/208/


原始答案(适用于 Chart.js 1.x 版本):

您可以使用以下方法实现此目的getSegmentsAtEvent(event)

Calling getSegmentsAtEvent(event)在您的 Chart 实例上传递一个 事件或 jQuery 事件的参数将返回段 位于该事件相同位置的元素。

From: 原型方法

所以你可以这样做:

$("#myChart").click( 
    function(evt){
        var activePoints = myNewChart.getSegmentsAtEvent(evt);           
        /* do something */
    }
);  

这是一个完整的工作示例:

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.2.js"></script>
        <script type="text/javascript" src="Chart.js"></script>
        <script type="text/javascript">
            var data = [
                {
                    value: 300,
                    color:"#F7464A",
                    highlight: "#FF5A5E",
                    label: "Red"
                },
                {
                    value: 50,
                    color: "#46BFBD",
                    highlight: "#5AD3D1",
                    label: "Green"
                },
                {
                    value: 100,
                    color: "#FDB45C",
                    highlight: "#FFC870",
                    label: "Yellow"
                }
            ];

            $(document).ready( 
                function () {
                    var ctx = document.getElementById("myChart").getContext("2d");
                    var myNewChart = new Chart(ctx).Pie(data);

                    $("#myChart").click( 
                        function(evt){
                            var activePoints = myNewChart.getSegmentsAtEvent(evt);
                            var url = "http://example.com/?label=" + activePoints[0].label + "&value=" + activePoints[0].value;
                            alert(url);
                        }
                    );                  
                }
            );
        </script>
    </head>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
    </body>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Chart.js 中饼图的点击事件 的相关文章

随机推荐

  • Flutter - 选择项目后折叠 ExpansionTile

    我想得到ExpansionTile在我选择一个项目后折叠 但它不会关闭打开的列表 我尝试使用onExpansionChanged财产但我没有成功 你如何解决这个问题 插入一个 gif 来证明ExpansionTile选择项目后不会崩溃 下面
  • 无法绑定到“占位符”,因为它不是“ng-multiselect-dropdown”的已知属性

    我想实现自动完成功能 因此我发现的一个相同选项是使用多选下拉菜单 所以我使用了这个模块 https www npmjs com package ng multiselect dropdown 但在同上实施后 我收到这些错误 Error ER
  • 如何检查Python中的字符串中是否有*任一*字符? [关闭]

    Closed 这个问题需要多问focused 目前不接受答案 我知道 if a in cat win 但有没有更好的方法来查找是否either字符串中存在两个字母 以下是一些方法 if a in cat or d in cat win if
  • 如何将逗号分隔的数字字符串转换为整数数组?

    说我有绳子1 2 3 4 5我想将其转换为整数数组 最好的方法是什么 我知道我可以使用爆炸来创建一个带有字符串的数组 但我需要数组项是整数 您可以使用array map申请intval分解字符串后的每个数组项 string 1 2 3 4
  • 使用 scrapy 蜘蛛间歇性“getrandom() 初始化失败”

    我构建了一个 scrapy 蜘蛛 scrapy 1 4 该蜘蛛是通过 django rq 和supervisord 从 django 网站按需触发的 这是正在监听 django rq 事件的supervisord 作业 reddit 用作代
  • 检索 ASP.NET 中的所有发布值

    我正在创建一个 ASP NET 应用程序 它允许用户将表单元素添加到表单内的页面 当页面发布时 通过提交按钮 我需要循环遍历表单中所有发布的值并获取值 我无法检查具体值 因为我不知道会有多少个值或它们将被称为什么 有人可以指出我获取所有发布
  • 如何将数据集拆分/分区为训练和测试数据集,例如交叉验证?

    将 NumPy 数组随机拆分为训练和测试 验证数据集的好方法是什么 类似的东西cvpartition or crossvalindMatlab 中的函数 如果你想将数据集分成两部分 你可以使用numpy random shuffle or
  • 当需要相同类型的多个实例时,使用 Unity 进行 DI

    我需要这方面的帮助 我使用 Unity 作为容器 并且想将同一类型的两个不同实例注入到我的构造函数中 class Example Example IQueue receiveQueue IQueue sendQueue IQueue 是在我
  • OrderedDict 在 Python 3.7 中会变得多余吗?

    来自Python 3 7 变更日志 插入顺序保存性质dict物体已宣布成为 Python 语言规范的正式部分 这是否意味着OrderedDict会变得多余吗 我能想到的唯一用途是保持与旧版本 Python 的向后兼容性 旧版本的 Pytho
  • Boost::Asio,SSL 连接问题

    我已经尝试解决我的问题几天了 但就是无法解决 我尝试使用 Boost Asio 库和 OpenSSL 进行 SSL 连接 有一个示例代码 如何做到这一点 http www boost org doc libs 1 55 0 doc html
  • 如何使用selenium获取特定元素的html源?

    我正在查看的页面包含 div p text 1 p h1 text 2 h1 text 3 p text 4 p div 我想获取 div 中的所有文本 除了
  • 阿特金分段筛可能吗?

    我知道可以实现埃拉托斯特尼筛法 以便它连续找到素数而没有上限 分段筛 我的问题是 阿特金 伯恩斯坦筛法可以用同样的方式实现吗 相关问题 C 如何使阿特金筛增量 然而相关问题只有1个答案 即 对于所有筛子都是不可能的 这显然是不正确的 Atk
  • 文件 InfoPlist.strings 无法打开

    谁能帮帮我吗 我应该如何修复错误 无法打开文件 InfoPlist strings 因为没有这样的文件 它是在我从 SVN 更新我的项目后出现的 实际上我的项目中有 InfoPlist strings 我不知道为什么 Xcode 没有看到它
  • 写入现有 Excel 文件

    package jexcel jxl nimit import java awt Label import java io File import java io IOException import jxl Cell import jxl
  • 删除数据表中的主键

    有没有办法从数据表中删除主键或者有没有办法先删除 PK 的约束 然后删除列本身 Thanks UPDATED dtTable Columns Add new System Data DataColumn PRIMARY KEY typeof
  • 通过伪经典实例化掌握原型继承(JavaScript)

    我正在尝试通过 JavaScript 使用继承来通过测试套件 下面是我到目前为止的代码片段 var Infant function this age 0 this color pink this food milk Infant proto
  • 将双精度型转换为 int

    转换的最佳方法是什么double to an int 应该使用演员阵容吗 如果您想要默认的向零截断行为 则可以使用强制转换 或者 您可能想使用Math Ceiling Math Round Math Floor等等 尽管之后你仍然需要演员阵
  • 将字符串转换为日期时间(使用 SSIS)

    我想将值 5 27 2013 16 42 37 490000 从平面文件 DT STR 读取 插入到 SQL Server 表的列 日期时间 中 如果我尝试在派生列中使用 DT DBDATE 或 DT DBTIMESTAMP 对其进行强制转
  • 忽略 Xcode4 中的“属性不可用”警告

    我在工具栏项中使用了很多 自定义标识符 这在 Xcode4 中很好 但在构建项目时它给了我一堆警告 属性不可用 Interface Builder 3 2 之前版本中的自定义标识符 有没有办法在Xcode4中忽略这些警告 当我搜索 真正的
  • Chart.js 中饼图的点击事件

    我有一个关于 Chart js 的问题 我使用提供的文档绘制了多个饼图 我想知道单击其中一个图表的某个切片是否可以根据该切片的值进行 ajax 调用 例如 如果这是我的data var data value 300 color F7464A