在Flot中設置自定義X軸值

我的自定義X軸值不會顯示在fl js中。在Flot中設置自定義X軸值

代碼用於繪製線圖如下：

var length = 0; 
var length1 = 0; 
var dataXY = []; 
var data = []; 
var dataX = []; 
length = allVenues.length; 
for (var i = 0; i < length; i++) { 
    length1 = allVenues[i].length; 
    for (var j = 0; j < length1; j++) { 
     dataX.push([j, returnDate(allVenues[i][j].date)]); 
     dataXY.push([returnTimestamp(allVenues[i][j].date), allVenues[i][j].price, "<b>X</b> : " + returnDate(allVenues[i][j].date) + " | " + " <b>Y</b>: " + allVenues[i][j].price]); 
    } 
} 
var result = {'label': 'Demo Graph', 'data': dataXY}; 
data = [result]; 

var options = { 
    lines: { 
     show: true 
    }, 
    points: { 
     show: true 
    }, 
    xaxis: { 
     ticks: dataX 
    }, 
    grid: { 
     hoverable: true, 
     clickable: true 
    }, 
    tooltip: { 
     show: true, 
     content: "%s | X: %x | Y: %y" 
    } 
}; 
function returnTimestamp(val) { 
    var dateTime = new Date(val); 
    return moment(dateTime).unix(); 
} 

function returnDate(val) { 
    var dateTime = new Date(val); 
    return moment(dateTime).format("YYYY-MM-DD hh:mm:ss A"); 
} 

$.plot("#placeholder", data, options);

dataXY數組的值是：

{"label":"Demo Graph","data":[[1455776629,12],[1455801889,30],[1455962948,45]]}

DATAX數組的值是：

[[0, "2016-02-18 11:53:49 AM"], [1, "2016-02-18 06:54:49 PM"], [2, "2016-02-20 03:39:08 PM"]]

現在我想設置此「dataX」數組作爲圖表上的X軸值（滴答）。該值顯示在X軸線圖的每個點的下方。來自allVenues Json Array的dataX和dataXY。

除了X軸數據外，我的圖形很好看。你可以在下面的圖片中看到。

來源

2016-02-24 Navin Nakum

你dataX陣列的蜱必須具有相同的x值（時間戳）作爲你的真實數據數組：

[[1455776629, "2016-02-18 11:53:49 AM"], [1455801889, "2016-02-18 06:54:49 PM"], [1455962948, "2016-02-20 03:39:08 PM"]]

PS：我還建議把一個換行符（<br>）在標籤中的日期和時間之間。

來源

2016-02-24 09:48:13 Raidri

感謝您的回覆，還有一件事，我想設置圖中的最大限制。例如，僅在圖中顯示前6個數據，因爲這是我的真實數據圖。請對此提出建議。 –

1）將循環中的'length1'設置爲6，這樣你只能得到6個數據點，或者2）使用[x軸選項]中的'min/max'值（https://github.com/flot/flot/斑點/主/ API.md＃定製-的軸）。 – Raidri

好吧，但如果我使用最小/最大，那麼我的圖形什麼也不顯示。 –

在Flot中設置自定義X軸值

回答

相關問題