Flot折线图时间xaxis系列固定标签

Question

我想创建一个带有时间 xaxis 系列的浮点折线图，它始终具有固定数量的标签，即 6。这 6 个标签将是每年的一半，持续 3 年。例如，标签可以是Jan-2016, June-2016, Jan-2017, June-2017, Jan-2019, June-2018。此处可以根据当前日期更改年份，但月份将固定。现在这些标签基于图表数据出现。所以我的数据在 2017 年 1 月到 2018 年 7 月之间没有任何价值，它们没有出现。此外，如果有单个数据，则不会出现 xaxis 标签。

那么，无论数据是什么，我怎样才能始终拥有六个标签？

我附上两个例子。一个只有一个值，因此它不显示 xaxis 标签，第二个示例有多个点，然后也不是所有标签都出现。

var flotLineOption = {            
	series: {
		lines: {
			show: true,
			fill: 0.01
		},
		points: {
			show: true,
			radius: 4
		}
	},
	grid: {
		borderColor: '#eee',
		borderWidth: 1,
		hoverable: true,
		backgroundColor: '#fcfcfc',
		margin: { bottom : 50 }
	},
	tooltip: true,
	tooltipOpts: {
		content: function (label, x, y) {
			var objDate = new Date(x);
			var yearValue = objDate.getFullYear();
			objDate = new Date(x).setMonth(objDate.getMonth() - 1);
			var monthName = new Date(objDate).toLocaleString("en-us", { month: "short" });
			return monthName + " " + yearValue + ' : ' + y; 
		}
	},
	xaxis: {
		tickColor: '#eee',
		tickDecimals: 0,
		tickSize: 6,
		show: true,
		mode: "time",
		timeformat: "%b %y",
		ticks: [new Date(2017,1).getTime(), new Date(2017,6).getTime(), new Date(2018,1).getTime(), new Date(2018,6).getTime(), new Date(2019,1).getTime(), new Date(2019,6).getTime()]
	},
	yaxis: {
		position: 'left',
		tickColor: '#eee',
		tickDecimals: 0
	},
	shadowSize: 0
};

function getData(){
    var data = [];

	
	data.push([new Date(2017, 2).getTime(), 8])
	data.push([new Date(2017, 8).getTime(), 2])
	data.push([new Date(2018, 3).getTime(), 9])
	data.push([new Date(2018, 9).getTime(), 3])
	data.push([new Date(2019, 4).getTime(), 7])

    return data;
}

$(function () { 
    
    $.plot($("#flotcontainer"),
        [
            {data: getData() }
        ],
        flotLineOption
    );
	
	$.plot($("#flotcontainer1"),
        [
            {data: [[new Date(2017, 4).getTime(), 7]] }
        ],
        flotLineOption
    );

});

#flotcontainer {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 0 auto;
}

#flotcontainer1 {
    width: 600px;
    height: 200px;
    text-align: center;
    margin: 50px auto  0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="flotcontainer"></div>
<div id="flotcontainer1"></div>

Answer 1

Flot 从第一个数据点开始图表并在最后一个数据点结束。这会导致您的分时位于图表之外。设置 x 轴的最小值和最大值以显示所有刻度：

xaxis: {
    //other options
    min: new Date(2017, 1).getTime(),
    max: new Date(2019, 6).getTime()
}

var flotLineOption = {
  series: {
    lines: {
      show: true,
      fill: 0.01
    },
    points: {
      show: true,
      radius: 4
    }
  },
  grid: {
    borderColor: '#eee',
    borderWidth: 1,
    hoverable: true,
    backgroundColor: '#fcfcfc',
    margin: {
      bottom: 50
    }
  },
  tooltip: true,
  tooltipOpts: {
    content: function(label, x, y) {
      var objDate = new Date(x);
      var yearValue = objDate.getFullYear();
      objDate = new Date(x).setMonth(objDate.getMonth() - 1);
      var monthName = new Date(objDate).toLocaleString("en-us", {
        month: "short"
      });
      return monthName + " " + yearValue + ' : ' + y;
    }
  },
  xaxis: {
    tickColor: '#eee',
    tickDecimals: 0,
    tickSize: 6,
    show: true,
    mode: "time",
    timeformat: "%b %y",
    ticks: [new Date(2017, 1).getTime(), new Date(2017, 6).getTime(), new Date(2018, 1).getTime(), new Date(2018, 6).getTime(), new Date(2019, 1).getTime(), new Date(2019, 6).getTime()],
    min: new Date(2017, 1).getTime(),
    max: new Date(2019, 6).getTime()
  },
  yaxis: {
    position: 'left',
    tickColor: '#eee',
    tickDecimals: 0
  },
  shadowSize: 0
};

function getData() {
  var data = [];


  data.push([new Date(2017, 2).getTime(), 8])
  data.push([new Date(2017, 8).getTime(), 2])
  data.push([new Date(2018, 3).getTime(), 9])
  data.push([new Date(2018, 9).getTime(), 3])
  data.push([new Date(2019, 4).getTime(), 7])

  return data;
}

$(function() {

  $.plot($("#flotcontainer"), [{
      data: getData()
    }],
    flotLineOption
  );

  $.plot($("#flotcontainer1"), [{
      data: [
        [new Date(2017, 4).getTime(), 7]
      ]
    }],
    flotLineOption
  );

});

#flotcontainer {
  width: 600px;
  height: 200px;
  text-align: center;
  margin: 0 auto;
}

#flotcontainer1 {
  width: 600px;
  height: 200px;
  text-align: center;
  margin: 50px auto 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/excanvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.time.js"></script>
<div id="flotcontainer"></div>
<div id="flotcontainer1"></div>