偏移折线图中的x轴值

Question

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

1. 我试图将第一个点（237）偏移到一定距离。在x轴下设置最小值和最大值没有帮助

2. 3月有31天，但4月1日和3月31日在同一个y轴上。如何让行军31显示在图表中？

3. 如何在图表上显示垂直网格线？

这是我的代码：

＆＃13;
＆＃13;
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);
    });
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

这是我目前的输出

感谢您解决此问题的任何帮助。感谢

Answer 1

1. 要从图表边缘偏移第一个和/或最后一个数据点，请将最小值/最大值添加到x轴。

2. 要修复日期，请使用其UTC版本中的所有let urlStr = "https://j.map.baidu.com/YwUSO" let url = URL(string: "https://j.map.baidu.com/YwUSO")! var urlRequest = URLRequest(url: url) urlRequest.httpMethod = "HEAD" URLSession.shared.dataTask(with: urlRequest) { (data, urlResponse, error) in let expandedURL = urlResponse?.url?.absoluteString print("expandedURL HEAD: \(expandedURL ?? "Oops, not URL")") }.resume() 函数（请参阅here），并记住JavaScript中的月份是从零开始的。

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

   Date

请参阅代码段以获取完整示例：

＆＃13;
＆＃13;
xaxis: {
    // other options
    tickLength: null
},
＆＃13;
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);
});
＆＃13;
＆＃13;
＆＃13;