Question

我有一个使用highchart和js创建的饼图，并且能够单独使用滑块控制切片，但我遇到的问题是我希望饼图的最大值为100％而其他滑块有贡献那个。

找到在此处创建的饼图

jsfiddle.net/vksvicky/3mv5gcto/2 /

默认情况下，您可以看到值总计最多100，现在当我使用滑块时，值会相应更改并且饼图会发生变化，但我还要相应地更新滑块，我该如何实现它。

Answer 1

以下是关于如何做到这一点的一般概念：http://jsfiddle.net/3mv5gcto/4/

在chart.events中，你可以在重绘之后设置所有滑块的值（注意：我已经为这些滑块设置了滑块的参考，只是为了让它们易于使用）：

        events: {
            redraw: function () {
                //update sliders   
                $.each(chart.series[0].points, function (i, point) {
                    point.slider.slider('value', point.percentage);
                });
            }
        }

现在，您唯一需要做的就是根据一些计算更新所有点。更改一个点后，您需要相应地更新所有点。例如，您将值从50更改为75（25更改），然后您需要减少所有其他滑块的值。示例代码：

var pointsLength = chart.series[0].data.length;
$.each(chart.series[0].points, function (i, point) {
    $('<input type="hidden" name="slider[]">').val(point.y).appendTo('#sliders');
    // keep reference to the points
    point.slider = $('<div></div>').appendTo('#sliders').slider({
        value: point.y,
        max: 100,
        min: 0,
        slide: function (event, ui) {
            var prevVal = point.y,
                step = (ui.value - point.y) / (pointsLength - 1), //split changed value to all sliders
                data = [],
                newVal;

            $.each(chart.series[0].points, function(i, p){
                if(p === point) {
                    data.push({
                        name: p.name,
                        y: ui.value
                    })
                } else {
                    data.push({
                        name: p.name,
                        y: p.y - step 
                    })
                }
            });
            chart.series[0].setData(data);
            $(this).prev().val(ui.value)
        }
    })
    point.slider.children('a').css('background', point.color).text('    ' + point.legendItem.textStr)
})

注意：这不是一个完美的解决方案，因为当你将一个滑块更改为100％时，其余的将低于0％，这显然是错误的。你需要在这里实现逻辑，滑块应该改变多少。

Answer 2

滑块不能按百分比刻度工作，而是相对权重刻度。因此，移动另一个滑块时不应修改一个滑块。为了说明这一点，请转到您的演示并将所有滑块移到中间。你应该看到一个馅饼平均分为6片。现在将所有滑块一直向右移动。馅饼并没有变得更大（我注意到这一点，因为如果分析是百分比，那么馅饼将被迫扩大）。相反，该程序进行相对分析（比较每个滑块的比例）并得出相同的结果，6个均匀分割的部分。

如果您想进行基于百分比的分析，则需要使用其他程序。

另一种选择是保持相对比例，但要将参数中的相对比例设置为100％。因此，在6个馅饼的情况下，如果我们开始时每个部分相等，并且每个滑块将以滑块上方的16.66％开始（大部分向左）。如果您向右或向左滑动其中一个滑块，则必须进行数学运算以相应地调整其他滑块，以确保所有内容仍然加起来达到100％。我会建议所有受影响的滑块都按相等的百分比（增加或减少％）进行调整，以计算拖动滑块的增益或损失。

滑块饼图控制器

2 个答案: