2014-04-01 63 views
0

我想繪製我的網頁圖表.Am能夠正確設置圖表值。但值不設置。因爲這最後得到了空間。值在flot圖表中設置

var DataSet1 = [ 
       [new Date("2014/03/03").getTime(), 0], 
       [new Date("2014/03/10").getTime(), 16 ], 
       [new Date("2014/03/17").getTime(), 32 ], 
       [new Date("2014/03/24").getTime(), 189], 
       [new Date("2014/03/31").getTime(), 250]   ]; 

    var DataSet2 = [ 
       [new Date("2014/03/03").getTime(), 0], 
       [new Date("2014/03/10").getTime(), 40], 
       [new Date("2014/03/17").getTime(), 20 ], 
       [new Date("2014/03/24").getTime(), 180], 
       [new Date("2014/03/31").getTime(), 230] ]; 


     /* to find last 4 weeks mondays */ 

      var newDate = new Date(); 
      var day = newDate.getDay(); 
      var date = newDate.getDate(); 
      var xaxisArray = []; 
      for(var i = 0;i<5;i++){if(i!=0){ 
        var tempnewDate = new Date(setNewDate); 
        setNewDate =tempnewDate.setDate(tempnewDate.getDate()-(7)); 
        xaxisArray.push(setNewDate); 
       } else { 
        setNewDate =newDate.setDate(date-day+1); 
        xaxisArray.push(setNewDate); 
       }    
      } 

      $.plot($("#chart-revenue2"),[ 
       { data: DataSet1,label: "#FST",}, 
       { data: DataSet2, label: "SCND", 
        points: { show: true }, 
        lines: { show: true,fill: false}, 
        yaxis: 2,color:"#C76C6B"} ] , 
       { 
        xaxis: 
         { 
          mode: "time", 
          min: xaxisArray[4], 
          max:xaxisArray[0], 
          timeformat: "%d/%m/%y", 
          ticks: xaxisArray.reverse(), 
          minTickSize :30 
         } 
        , yaxes: [ 
          { 
           min:0, max: 400, tickSize: 50 
          }, 
          {     
           position: "right", 
           min:0, max: 300, tickSize: 50        
          } 
         ], 
         series: {       
          lines: { 
           show: true, 
           lineWidth: 3, 
           fill: true 
          }, 
          shadowSize: 0, 
         }, 
         grid: {backgroundColor: { colors: ["#ffffff", "#f4f4f4"] }}, 
         colors: ["#294777"], 
         legend: { show: true, container: '#chart-revenue1-table' } 

      }); 

請檢查我fiddle ..

回答

1

問題是你如何計算軸蜱的日期。當您創建newDate時,它會有小時,分鐘和秒鐘,然後將其包含在每個記號中。確保他們都爲零,它都將排隊:

var newDate = new Date() 
newDate.setHours(0); 
newDate.setMinutes(0); 
newDate.setSeconds(0); 

有可能是一個更好的方式來做到這一點,我只是還沒有看它:)

看到它在這裏工作:http://jsfiddle.net/ryleyb/htsBz/1/

+0

感謝您的建議Ryley .. – user2587222

1

你設置超出你有數據的最後一個點的x軸的最大值。你期望它做什麼?它沒有數據,因此它保留空白。如果你想讓你的軸適合,把它的最大值設置爲max: new Date("2014/03/31").getTime(),或者更好,只是不要設置最大值,讓flot自動調整它。

+0

請檢查軸點。值不正確。紅線值不是根據x軸坐。 – user2587222

+0

不錯的嘗試馬特 - 我同意最小/最大值被設置爲無用......基於@陳的評論,以及措辭不佳的問題,我認爲實際問題是爲什麼點不符合x軸剔號 – Ryley