2017-05-03 78 views
0

我正在使用角度js和moment.js。現在我正在爲線圖生成級別。所以我需要爲x軸值設置一些等級。我想在x'axis中設置小時間隔。現在我正在靜態使用這些(x'aix)值,但現在我想用javascript函數動態設置。我想以時間間隔以數組形式設置水平

var lineData = { labels: ["0hr", "1hr", "2hr", "3hr", "4hr", "5hr", "6hr"], 
       datasets: [     
        { 
         label: "My Second dataset", 
         fillColor: "rgba(151,187,205,0.2)",      
         pointHighlightFill: "#fff", 
         pointHighlightStroke: "rgba(151,187,205,1)", 
         data: [28, 48, 40, 19, 86, 27, 80] 
        } 
       ] 
      }; 
var startFromTime=11; 
var endToTime=15; 

我想在標籤中設置從11到15的時間間隔。

標籤:[ 「0HR」, 「1小時」, 「2小時」, 「3小時」, 「4小時」, 「5小時」, 「6小時」]

enter image description here

可以我設置將這些值以數組形式分配給變量,並將此變量分配到標籤中:[1,2,3,4]

回答

0

您不需要moment.JS,而是一個普通的舊JavaScript函數可以完成這項工作。

function getTimeLabels(start) { 
var timeStart = start; 
var limit = 7; 

var resultArr = []; 
var counter = 0; 

for (var x = 0; x < (timeStart + limit); x++) { 

    if (x > 24) { 
     resultArr.push(counter + "hr"); 
    } 
    resultArr.push(x + "hr"); 
} 

return resultArr; 
} 

在這裏,你通過你希望在啓動號碼,它會產生你的標籤,它也考慮到當x越過24,並使用不同的計數器來完成操作發生後。

你的代碼修改:

var lineData = { labels: getTimeLabels(0), 
       datasets: [     
        { 
         label: "My Second dataset", 
         fillColor: "rgba(151,187,205,0.2)",      
         pointHighlightFill: "#fff", 
         pointHighlightStroke: "rgba(151,187,205,1)", 
         data: [28, 48, 40, 19, 86, 27, 80] 
        } 
       ] 
      }; 
var startFromTime=11; 
var endToTime=15; 
+0

什麼是極限= 7? –

+0

謝謝。但我想繪製x軸值。如果我選擇開始時間5和結束時間13小時,那麼它必須繪製5,6,7,8,9,10,11,12,13。 –

+0

限制是它將移動的位置的數量,您可以另外添加另一個參數作爲限制,而我們可以移動更多位置。 –