Question

我正在使用Easy Pie Chart并稍微修改它以包含多个百分比和旋转以制作完整的饼图。这并不涉及与EPC相关的任何事情，但我认为我会背景。

我有以下HTML：

<div class="home-slider-chart-container">
    <div data-rotate="0" data-percent="2" class="home-slider-chart"></div>
    <div data-rotate="" data-percent="27" class="home-slider-chart"></div>
    <div data-rotate="" data-percent="20" class="home-slider-chart"></div>
    <div data-rotate="" data-percent="40" class="home-slider-chart"></div>
    <div data-rotate="" data-percent="6" class="home-slider-chart"></div>
    <div data-rotate="" data-percent="5" class="home-slider-chart"></div>
</div>

我想用jQuery执行的操作是通过每个.home-slider-chart运行并存储当前和以前的所有data-percent值的值然后我会用它来计算转数。

因此，在我的示例中，最后的data-rotate值将是：

<div data-rotate="0" data-percent="2" class="home-slider-chart"></div>
<div data-rotate="29" data-percent="27" class="home-slider-chart"></div>
<div data-rotate="49" data-percent="20" class="home-slider-chart"></div>
<div data-rotate="89" data-percent="40" class="home-slider-chart"></div>
<div data-rotate="95" data-percent="6" class="home-slider-chart"></div>
<div data-rotate="100" data-percent="5" class="home-slider-chart"></div>

我认为这样可行，但它所做的只是采用之前的百分比，而不是总计所有以前的百分比。

$('.home-slider-chart-container .home-slider-chart').each(function() {
    var thisPercentage = $(this).data('percent');
    var prevPercentage = $(this).prevAll().data('percent');
    var percentageTotal = (thisPercentage + prevPercentage);
    var thisRotation = (percentageTotal / 100 * 360);

    $(this).data('rotate', thisRotation);

});

我已经设置了一个jsFiddle，这样你就可以看到我想要做的事情，你可以将它用作测试环境https://jsfiddle.net/105o7b5m/1/

Answer 1

您需要一个.each()循环之外的变量来跟踪运行总计，您需要将每个元素仅旋转前一个运行总计（不包括当前值），例如：

var runningTotal = 0;
$('.home-slider-chart-container .home-slider-chart').each(function() {
    var thisRotation = (runningTotal / 100 * 360);
    $(this).data('rotate', thisRotation);
    // now update the running total for the next segment
    runningTotal += $(this).data('percent');
});

使用jsFiddle演示：http://jsfiddle.net/jfriend00/14rc3zL6/

在jQuery中汇总和存储以前的数据（值）

1 个答案: