在 Flot 中设置自定义 X 轴值答案

【问题标题】：Set custom X-Axis values in Flot在 Flot 中设置自定义 X 轴值
【发布时间】：2016-02-24 06:31:01
【问题描述】：

flot js 中不显示我的自定义 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 轴的折线图中的每个点的下方。这里 dataX 和 dataXY 来自 allVenues Json Array。

除了 X 轴数据外，我的图表运行良好。您可以在下图中看到。

【问题讨论】：

标签： javascript arrays json flot

【解决方案1】：

您的报价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>)。

【讨论】：

感谢您的回复，还有一件事，我想在图表中设置最大限制。例如，仅在图表中显示前 6 个数据，因为这是我的真实数据图表。请对此提出建议。
1) 将循环中的 length1 设置为 6，这样您就只能获得 6 个数据点，或者 2) 使用 x axis options 中的 min / max 值。
好的，但是如果我使用最小/最大，那么我的图表什么也不会显示。
最小值和最大值使用了哪些值？
我的 xaxis like : xaxis: { ticks: dataX, tickColor: 'transparent', min: 0, max: 6 }