在Chart.js中删除饼图上的切片onClick事件
在Chart.js中删除饼图上的切片onClick事件
提问于 2014-12-23 22:49:54
我有一个关于Chart.js上的拼图的问题。
单击切片时，删除切片的最佳方法是什么？我知道getSegmentsAtEvent()方法可以用来读取切片属性。通过循环遍历slices对象，可以找到我正在单击的切片，直到找到匹配的切片。有没有更简单的方法来实现它？
tks
回答 2
Stack Overflow用户
发布于 2014-12-23 23:29:30
这可以使用以下函数来实现：getSegmentsAtEvent(event)和removeData( index ) Chart.js API
使用getSegmentsAtEvent，您可以恢复已单击的数据段。
下一步，是在图表中找到切片的索引。要执行搜索，您可以遍历图表的所有当前部分，并在找到时调用removeData。(我认为没有办法直接知道指数)
var segments = myChart.segments;
for (var index = 0; index < segments.length; index++) {
if (activeLabel == segments[index].label) {
myChart.removeData(index);
}
}完整演示：
<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>Stack Overflow用户
发布于 2019-12-20 13:58:56
- 在图表的选项中获取
onclick属性。 - 即使当您在饼图外部(画布中的任何位置)单击时，也会触发此onclick事件，因此您必须使用图表的
myChart.getElementsAtEvent(event); - Get数据将其筛选出来，然后使用checks删除项目(在以下代码片段中，您只能删除中国或任何值小于50的国家/地区)。
- 使用
.update()方法
更新图表
以下是所需的工作代码片段
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/27622692
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号