javascript - 通过 slider 进行饼图 Controller

Question

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

查找此处创建的饼图

jsfiddle.net/vksvicky/3mv5gcto/2/

默认情况下，您可以看到值总计最多为100，现在当我使用 slider 时，值会相应变化，饼图也会变化，但我也想相应地更新 slider ，我该如何实现呢？

Answer 1

以下是如何做到这一点的一般想法:http://jsfiddle.net/3mv5gcto/4/

在chart.events中，重绘后，您可以为所有 slider 设置值(注意:我已将 slider 的引用设置为点，只是为了让它们易于使用):

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

现在，您唯一需要做的就是根据一些计算更新所有点。当其中一个点发生变化后，您需要对所有点进行相应更新。例如，您将值从 50 更改为 75(更改 25)，然后您需要减少所有其他 slider 的值。示例代码:

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)
})

注意:这不是一个完美的解决方案，因为当您将其中一个 slider 更改为 100% 时，其余 slider 将低于 0%，这显然是错误的。您需要在这里实现应该更改哪些 slider 以及更改多少的逻辑。