Chart.js 中饼图的点击事件-前端问题

Click events on Pie Charts in Chart.js(Chart.js 中饼图的点击事件)

本文介绍了Chart.js 中饼图的点击事件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

I've got a question regard Chart.js.

我使用提供的文档绘制了多个饼图.我想知道单击图表的某个部分是否可以根据该部分的值进行 ajax 调用?

I've drawn multiple piecharts using the documentation provided. I was wondering if on click of a certain slice of one of the charts, I can make an ajax call depending on the value of that slice?

例如，如果这是我的 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 标记的切片并调用以下形式的 url:example.com?label=red&value=300?如果是，我该怎么做?

is it possible for me to click on the Red labelled slice and call a url of the following form: example.com?label=red&value=300? If yes, how do I go about this?

推荐答案

更新: 正如@Soham Shetty 评论的那样，getSegmentsAtEvent(event) 仅适用于 1.x 和对于 2.x getElementsAtEvent 应该使用.

Update: As @Soham Shetty comments, getSegmentsAtEvent(event) only works for 1.x and for 2.x getElementsAtEvent should be used.

.getElementsAtEvent(e)

寻找事件点下的元素，然后返回所有元素在同一个数据索引.这在内部用于标签"模式突出显示.

Looks for the element under the event point, then returns all elements at the same data index. This is used internally for 'label' mode highlighting.

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

Calling getElementsAtEvent(event) on your Chart instance passing an argument of an event, or jQuery event, will return the point elements that are at that the same position of that event.

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)

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

Calling getSegmentsAtEvent(event) on your Chart instance passing an argument of an event, or jQuery event, will return the segment elements that are at that the same position of that event.

来自:原型方法

所以你可以这样做:

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

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

Here is a full working example:

<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>

这篇关于Chart.js 中饼图的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！