在 Chart.js 中删除饼图上的切片 onClick 事件

Question

I have a question regarding piecharts on Chart.js.我有一个关于 Chart.js 上的饼图的问题。

What would be the best way to remove a slice when clicking on it?单击切片时删除切片的最佳方法是什么？ I'm aware the method getSegmentsAtEvent() can be used to read the slice properties.我知道 getSegmentsAtEvent() 方法可用于读取切片属性。 It's possible to find out which slicing I'm clicking looping through the slices object until a match is found.可以找出我单击的切片对象循环遍历切片对象，直到找到匹配项。 Is there a simpler way to achieve it?有没有更简单的方法来实现它？

tks tks

Answer 1

This can be achieved using the functions: getSegmentsAtEvent(event) and removeData( index ) Chart.js API这可以使用以下函数来实现： getSegmentsAtEvent(event)和removeData( index ) Chart.js API

With getSegmentsAtEvent you can recover the segment that has been clicked.使用getSegmentsAtEvent您可以恢复已单击的段。

The next step, is to find the index of the slice in the chart.下一步，是在图表中找到切片的索引。 To do the search, you can iterate through all the current segments of the chart and call removeData when it's found.要进行搜索，您可以遍历图表的所有当前段并在找到时调用removeData 。 (I think there is no way to directly know the index) （我觉得没有办法直接知道索引）

var segments = myChart.segments;
for (var index = 0; index < segments.length; index++) {
    if (activeLabel == segments[index].label) {
        myChart.removeData(index);
    }
}

Full demo:完整演示：

<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 myChart = new Chart(ctx).Pie(data);

                    $("#myChart").click( 
                        function(evt){
                            var activePoints = myChart.getSegmentsAtEvent(evt);
                            var activeLabel = activePoints[0].label;
                            var segments = myChart.segments;
                            for (var index = 0; index < segments.length; index++) {
                                if (activeLabel == segments[index].label) {
                                    myChart.removeData(index);
                                }
                            }
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <canvas id="myChart" width="400" height="400"></canvas>
    </body>
</html>

Answer 2

Get the onclick property in options of chart.获取图表选项中的onclick属性。
This onclick event will trigger even when you click outside of pie (anywhere in canvas), so you have to filter it out by using myChart.getElementsAtEvent(event);即使您在饼图外（画布中的任何位置）单击，此 onclick 事件也会触发，因此您必须使用myChart.getElementsAtEvent(event);将其过滤掉myChart.getElementsAtEvent(event);
Get data of chart and then remove an item using checks(In the following snippet you can only remove china or any country with value less than 50).获取图表数据，然后使用检查删除项目（在以下代码段中，您只能删除中国或任何值小于 50 的国家/地区）。
Update the chart by using .update() method使用.update()方法更新图表

Following is the required working snippet以下是所需的工作片段

 var chart_click_event = function(event) { debugger; let activePoints = myChart.getElementsAtEvent(event); //If you click on empty area this if check will not pass. if (activePoints[0]) { let chartData = activePoints[0]['_chart'].config.data; let idx = activePoints[0]['_index']; let label = chartData.labels[idx]; let value = chartData.datasets[0].data[idx]; if (label == 'China' || value < 50) { chartData.labels.splice(idx, 1); chartData.datasets[0].data.splice(idx, 1); myChart.update(); } } } var data = [{ data: [50, 55, 60, 33], backgroundColor: [ "#4b77a9", "#5f255f", "#d21243", "#B27200" ], borderColor: "#fff" }]; var options = { tooltips: { enabled: true }, plugins: { datalabels: { color: '#fff', } }, onClick: chart_click_event }; var ctx = document.getElementById("pie-chart").getContext('2d'); var myChart = new Chart(ctx, { type: 'pie', data: { labels: ['Pakistan', 'China', 'US', 'Canada'], datasets: data }, options: options });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@0.7.0"></script> <canvas id="pie-chart"></canvas>

在 Chart.js 中删除饼图上的切片 onClick 事件

问题描述

2 个解决方案

解决方案1
2 2014-12-23 15:29:30

解决方案2
0 2019-12-20 05:58:55

在 Chart.js 中删除饼图上的切片 onClick 事件

问题描述

2 个解决方案

解决方案1 2 2014-12-23 15:29:30

解决方案2 0 2019-12-20 05:58:55

解决方案1
2 2014-12-23 15:29:30

解决方案2
0 2019-12-20 05:58:55