偏移折线图中的 x 轴值

Question

我正在尝试使用 flot 库生成折线图。我有 3 个问题：

我正在尝试将第一个点 (237) 偏移到一定距离。在 x 轴下设置最小值和最大值没有帮助
3 月有 31 天，但 4 月 1 日和 3 月 31 日在同一个 y 轴上。如何让 3 月 31 日显示在图表中？
如何让垂直网格线显示在图表上？

这是我的代码：

var alertTrendData = [[gd(2018,3,26),237],[gd(2018,3,27),200],[gd(2018,3,28),252],[gd(2018,3,29),232],[gd(2018,3,30),161],[gd(2018,3,31),54],[gd(2018,4,1),18],[gd(2018,4,2),134]];
    var alertTrendDataset = [{
        data: alertTrendData,
        points:{
            symbol: "circle"
        },
        valueLabels: {
            show: true,
            font: "9pt 'Trebuchet MS'"    
        }
    }];

    var alertTrendOptions = {
        series: {
            lines: {
                show: true
            },
            points: {
                radius: 3,
                fill: true,
                show: true            
            }
        },
        xaxis: {
            mode: "time",
            timeformat: "%m/%d",
            //tickSize: [1, "month"],        
            tickLength: 0,
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 10,
            tickFormatter: function (v, axis) {
                var d = new Date(v);
                return (d.getUTCMonth()) + "/" + d.getUTCDate();
            }
        },
        yaxes: [{
            axisLabelUseCanvas: true,
            axisLabelFontSizePixels: 12,
            axisLabelFontFamily: 'Verdana, Arial',
            axisLabelPadding: 3,
        }],
        legend: {
            noColumns: 0,
            labelBoxBorderColor: "#000000",
            position: "nw"
        },
        grid: {
            hoverable: true,
            borderWidth: 0,
            borderColor: "#633200",
            backgroundColor: { colors: ["#ffffff", "#EDF5FF"] }
        },
        colors: ["#296292", "#0022FF"]
    };

    function gd(year, month, day) {
        //var x = new Date(year, month, day).getTime(); 
        var x = new Date(year, month, day).getTime(); 
        return x;
    }

    $(document).ready(function () {
        $.plot($("#alertTrend_Canvas"), alertTrendDataset, alertTrendOptions);
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<div id="alertTrend_Canvas" style="height: 300px;"></div>

这是我当前的输出

对于解决此问题的任何帮助，我将不胜感激。谢谢

Answer 1

要从图表边缘偏移第一个 and/or 最后一个数据点，请将 min/max 值添加到 x 轴。
要确定日期，请使用 UTC 变体中的所有 Date 函数（参见 here）并记住 JavaScript 中的月份是 zero-based.

对于垂直网格线添加此选项：

xaxis: {
    // other options
    tickLength: null
},

查看完整示例的代码片段：

var alertTrendData = [
  [gd(2018, 3, 26), 237],
  [gd(2018, 3, 27), 200],
  [gd(2018, 3, 28), 252],
  [gd(2018, 3, 29), 232],
  [gd(2018, 3, 30), 161],
  [gd(2018, 3, 31), 54],
  [gd(2018, 4, 1), 18],
  [gd(2018, 4, 2), 134]
];

var alertTrendDataset = [{
  data: alertTrendData,
  points: {
    symbol: "circle"
  },
  valueLabels: {
    show: true,
    font: "9pt 'Trebuchet MS'"
  }
}];

var alertTrendOptions = {
  series: {
    lines: {
      show: true
    },
    points: {
      radius: 3,
      fill: true,
      show: true
    }
  },
  xaxis: {
    mode: "time",
    timeformat: "%m/%d",
    //tickSize: [1, "month"],        
    tickLength: 0,
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 10,
    tickFormatter: function(v, axis) {
      var d = new Date(v);
      return (d.getUTCMonth()+1) + "/" + d.getUTCDate();
    },
    tickLength: null,
    min: gd(2018, 3, 25),
    max: gd(2018, 4, 3)
  },
  yaxes: [{
    axisLabelUseCanvas: true,
    axisLabelFontSizePixels: 12,
    axisLabelFontFamily: 'Verdana, Arial',
    axisLabelPadding: 3,
  }],
  legend: {
    noColumns: 0,
    labelBoxBorderColor: "#000000",
    position: "nw"
  },
  grid: {
    hoverable: true,
    borderWidth: 0,
    borderColor: "#633200",
    backgroundColor: {
      colors: ["#ffffff", "#EDF5FF"]
    }
  },
  colors: ["#296292", "#0022FF"]
};

function gd(year, month, day) {
  //var x = new Date(year, month, day).getTime(); 
  var x = new Date(Date.UTC(year, month-1, day)).getTime();
  return x;
}

$(document).ready(function() {
  $.plot($("#alertTrend_Canvas"), alertTrendDataset, alertTrendOptions);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.time.min.js"></script>
<div id="alertTrend_Canvas" style="height: 300px;"></div>

偏移折线图中的 x 轴值

Offsetting the x-axis values in the line graph

jquery

flot