从X范围绘制总和条形图数据

时间:2013-08-22 18:17:53

标签: javascript jquery graph flot

参考这个小提琴:http://jsfiddle.net/chrisgzf/KMQcs/#base

我正在尝试使用2个jQuery UI滑块绘制带有31天数据的条形图,以与Flot的选择插件进行交互。对于水平轴上的滑块,如何将某个x范围内的所有图形值相加?例如,当我的滑块在3和9上时,我想要总结3到9之间的值。如何在jquery / javascript中编写它?

现在,我有这个

$("#placeholder").bind("plotselected", function(event, ranges) {
    var first = Math.round(ranges.xaxis.from.toFixed(1));
    var second = Math.round(ranges.xaxis.to.toFixed(1));
    var difference = second - first;
    var series = plot.getData();

    $("#topBox").text("From August " + first + " to August " + second + ", you have used " + difference * getRandomInt(1200, 1800) + "kWh of electricity.");
    // how do i sum up the values from a certain range??
    $("#btmBox").text("The highlighted area on the y-axis represents " + (ranges.yaxis.to.toFixed(1) - ranges.yaxis.from.toFixed(1)) + "kWh");
});

1 个答案:

答案 0 :(得分:2)

你的意思是这样吗?

var plotData = series[0].data;
var sum = 0;
for (var i = first; i < second; i++)
    sum += plotData[i-1][1];
$("#sum").html(sum);

看看你修改过的小提琴:http://jsfiddle.net/KMQcs/8/ 只需移动水平滑块。