javascript - 如何逐步增加由 jQuery UI 滑块呈现的图表中的输出？

Question

我正在寻找一种基于 jQuery UI 滑块确定的值动态更新 Highcharts 的方法。假设价格为 100 美元/月，每月售出 5 个单位。每个月的数据点将通过前几个月的总和加上（单位*价格）来计算，单位数量将每月增加 5 个。例如第 1 个月：(100*5) = 500 第 2 个月：500 + (100*10) = 1500 第 3 个月：1500 + (100*15) = 3000 第 4 个月：3000 + (100*20) = 5000 等等。 ..所以图表应该看起来更像一条曲线。我该怎么做呢？这是我的jsFiddle。 http://jsfiddle.net/nlem33/eyGMu/2/

slide: function(event, ui) {
$('#slider2_value').html('$' + ui.value);
var newdata = [];
for (var i=0 ; i<6 ; i++) {
    newdata.push(ui.value * i);
}
chart.series[0].setData (newdata);

},

Answer 1

那是你想要的吗？:-)

var sliderHandler = function (event, ui) {
    var newdata = [],
        data = [],
        sum = 0;

    if (this.id === 'slider1') {
        $('#slider1_value').html(ui.value);
        units = ui.value;
    } else {
        $('#slider2_value').html('$' + ui.value);
        price = ui.value;
    }

    for (var i = 0; i < 13; i++) {
        data.push(units * price);

        for (var j = 0; j < i; j++)
            sum += data[j];

        newdata.push(sum + units * price);
    }

    chart.series[0].setData(newdata);
    chart.series[1].setData(newdata);
}

$('#slider1').slider({

    min: min_value,
    max: max_value,
    step: 5,

    slide: sliderHandler,
    stop: function (event, ui) {

    }
});

滑块2相同

这是您修改后的曲线示例-> http://jsfiddle.net/eyGMu/5/