我有一个关于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
标记的切片并调用以下形式的网址: example.com?label=red&value=300
?如果是,我该如何解决这个问题?
10 回答
Update: 正如@Soham Shetty评论,
getSegmentsAtEvent(event)
仅适用于1.x而且适用于2.x getElementsAtEvent .示例:https://jsfiddle.net/u1szh96g/208/
原始答案(对Chart.js 1.x版本有效):
您可以使用
getSegmentsAtEvent(event)
实现此目的来自:Prototype Methods
所以你可以这样做:
这是一个完整的工作示例:
使用Chart.JS版本 2.1.3 ,比这个更早的答案不再有效 . 使用getSegmentsAtEvent(event)方法将在控制台上输出此消息:
所以我认为必须将其删除 . 老实说,我没有阅读任何更改日志 . 要解决这个问题,只需使用
getElementsAtEvent(event)
方法,因为它可以找到on the Docs .在下面可以找到获得有效点击切片标签和值的脚本 . 请注意,检索标签和值也略有不同 .
希望能帮助到你 .
Chart.js 2.0使这更容易 .
您可以在文档中的常见图表配置下找到它 . 应该更多的饼图 .
它会在整个图表上触发,但如果您点击饼图,那个饼图的模型包括可用于获取值的索引 .
工作正常的图表部门onclick
ChartJS:饼图 - 添加选项“onclick”
几天以后我遇到了同样的问题,今天我找到了解决方案 . 我已经显示了准备执行的完整文件 .
如果使用“请求图表”,并且您希望阻止用户在图表圈子周围的空白处单击时触发您的事件,则可以使用以下替代方法:
如果您使用的是TypeScript,则代码有点时髦,因为没有类型推断,但这可以获取已提供给图表的数据的索引:// events public chartClicked(e:any):void { //console.log(e);
要成功跟踪点击事件以及用户点击的图元素,我在.js文件中执行了以下操作:我设置了以下变量:
然后在我的.html文件中,我按如下方式设置图表:
在选项中放置你的onclick并调用你需要的函数作为你需要的ajax的例子,我将留下这个例子,这样每次点击一个点都会告诉你值,你可以在你的新函数中使用它 .