flot折线图时间x轴系列固定标签

Question

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

那么无论数据是什么，我怎么总是有六个标签？

我附上两个例子。一个只有一个值，因此它不显示 x 轴标签，第二个示例有多个点，但也并非所有标签都出现。

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>

flot折线图时间x轴系列固定标签

Flot line chart time xaxis series fixed labels

javascript

jquery

charts

flot