如何计算点击甜甜圈元素的中点与负y轴之间的角度 [英] how to calculate the angle between the mid of a clicked donut element and the negative y-axis

问题描述

，现在当我点击甜甜圈时添加了'图像'类，我想动态添加'图像'类中的度数，以便点击的项目在底部朝下（如'

Consider the following codesample donut chart using jquery-flot , now as i have added the 'image' class on click of the donut, i want to dynamically add the degree in the 'image' class so that the clicked item will be facing down at the bottom ( like on the -ve side of the y-axis ).`

var data = [{
    label: "Pause",
    data: 150
}, {
    label: "No Pause",
    data: 100
}, {
    label: "yes Pause",
    data: 80
}, {
    label: "Sleeping",
    data: 250
}];

var options = {
    series: {
        pie: {
            show: true,
            innerRadius: 0.5,
            radius: 1,
            startAngle: 1,

        }
    },
    grid: {
        hoverable: true,
        clickable: true
    },
    legend: {
    show: false
    },
    stroke: {
    width: 4
    },
    tooltip: true,
    tooltipOpts: {
        cssClass: "flotTip",
        content: "%s: %p.0%",
        defaultTheme: false
    }
};
$("#pie-placeholder").bind("plotclick", function(event, pos, obj) {
   $("#pie-placeholder").addClass('image')

    });
var plot = $.plot($("#pie-placeholder"), data, options);

`

注意： - 这是使用Jquery flot完成

Note:- this is done using Jquery flot

推荐答案

这里如果我找对了，你可以找到我的解决方案。

Here you can find my solution to your problem if I got you right.

$("#pie-placeholder").bind("plotclick", function(event, pos, obj) {
if (obj) {
    var percentInRads = 0.02;
    var currSegmentInRads = percentInRads * obj.datapoint[0]
    var currSegmentOffset = currSegmentInRads / 2;
    var currSegmentStart = currSegmentOffset >= 0.5 ? -0.5 + currSegmentOffset : 0.5 - currSegmentOffset;
    var total = 0;
    var beforeTotal = 0;

    for (var idx = 0; idx < data.length; idx++) {
      var segment = data[idx];

      if (idx < obj.seriesIndex) {
        beforeTotal += segment.data;
      }

      total += segment.data;
    }

    var beforePart = (beforeTotal / total * 100) * percentInRads;
    var chartStartAngle = currSegmentStart - beforePart;

    options.series.pie.startAngle = chartStartAngle;
    $.plot($("#pie-placeholder"), data, options);
    console.log(obj.series);
}

});

这篇关于如何计算点击甜甜圈元素的中点与负y轴之间的角度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！