使用多个Jquery滑块绘制图形

时间:2013-03-29 09:02:30

标签: html5 jquery-mobile graph slider flot

我正在使用多个Jquery UI滑块将值填充到我使用Jquery FLot绘制的图形上。 我面临的问题是我需要为图形设置一个最大值,每个滑块为图形贡献一些值,即图形累积填充。 但每次我尝试使用多个滑块填充图形时,jquery滑块会给出错误的值,图形也会填充多个值。 如果我删除逻辑并使用任何滑块填充图形,那么图表会给出单独的值。 这是我正在处理的代码的一部分:

var plot_val=0;
        function plot(val) {
        value_plot=val;

        var d2 = [[0, value_plot]];
        var d3 = [[0, value_plot/2]]
        var options_blue = {
                series: {color: '#0000ff',
                bars: { show: true,  barWidth :20*20}},
                  xaxis:  {show:false, min: 1} ,
                  yaxis:  { show:true,min: 0,max:500} 

              };
        var options_red = {
                series: {color: '#FF0000',
                bars: { show: true,  barWidth : 20*20}},
                  xaxis:  {show:false, min: 1} ,
                  yaxis:  { show:true,min: 0,max:500 } 

              };
        $.plot($("#placeholder"),  [d2],options_blue);
        $.plot($("#placeholder1"),  [d3],options_red);


    };

        $(function() {
            $( "#slider-range-min_1" ).slider({
              range: "min",
              value: 1,
              min: 1,
              max: 500,
              slide: function( event, ui ) {

                plot(ui.value);
              }
             });
          });
        $(function() {
            $( "#slider-range-min_2" ).slider({
              range: "min",
              value: 1,
              min: 1,
              max: 500,
              values: [1,500],
              slide: function( event, ui ) {

                plot(ui.value);
               }
             });
          });

0 个答案:

没有答案