折线图中的x轴值

快速芯片

我正在尝试使用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>

这是我目前的输出

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

Raidri支持Monica

要从图表边缘偏移第一个和/或最后一个数据点，请将最小/最大值添加到x轴。
要确定日期，请使用Date其UTC变体中的所有函数（请参阅此处），并记住JavaScript中的月份是从零开始的。

对于垂直网格线，请添加以下选项：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。