如何计算单击的甜甜圈元素的中点与负 y 轴之间的角度

Question

Consider the following codesample donut chart using jquery-flot，现在我在点击甜甜圈时添加了 'image' class，我想在 'image' [=20] 中动态添加度数=] 这样单击的项目将在底部面朝下（就像在 y 轴的 -ve 侧）。`

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

完成的

Answer 1

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

$("#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 轴之间的角度

how to calculate the angle between the mid of a clicked donut element and the negative y-axis

html

javascript

css

jquery

flot