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

Question

我想创建一个带有时间xaxis系列的浮点折线图，它将始终具有固定数量的6个标签。这6个标签将是三年中每年的一半。 例如，标签可以是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>