jQuery Flot.js:折线图点不以x轴网格线为中心

时间:2016-07-20 09:35:13

标签: javascript jquery flot

我的点不会显示为x轴网格线的中心,如下面的屏幕截图所示:

enter image description here

我使用的选项如下:

    var options = {
      grid: {
        show: true,
        aboveData: false,
        color: "#3f3f3f",
        labelMargin: 10,
        axisMargin: 0,
        borderWidth: 0,
        borderColor: null,
        minBorderMargin: 5,
        clickable: true,
        hoverable: true,
        autoHighlight: true,
        mouseActiveRadius: 100
      },
      series: {
        lines: {
          show: true,
          fill: true,
          lineWidth: 2,
          steps: false
        },
        points: {
          show: true,
          radius: 4.5,
          symbol: "circle",
          lineWidth: 3.0
        }
      },
      legend: {
        position: "ne",
        margin: [0, -15],
        noColumns: 0,
        labelBoxBorderColor: null,
        labelFormatter: function(label, series) {
          // just add some space to labes
          return label + '  ';
        },
        width: 40,
        height: 1
      },
      colors: chartColours,
      shadowSize: 0,
      tooltip: true, //activate tooltip
      tooltipOpts: {
        content: "%s: %y.0",
        xDateFormat: "%d/%m",
        shifts: {
          x: -30,
          y: -50
        },
        defaultTheme: false
      },
      yaxis: {
        min: 0,
        tickDecimals:0
      },
      xaxis: {
        mode: "time",
        minTickSize: tickSize,
        timeformat: tformat,
        min: chartMinDate,
        max: chartMaxDate
      }
    };

我的数据集是一个时间序列,标签值也来自同一数据集,因此日期应与点对齐。但是它是偏移的,而没有选项。我做错了什么?

1 个答案:

答案 0 :(得分:1)

我从这个链接获得了解决方案

points aren't aligned with the x axis on flot chart

并且

https://code.google.com/archive/p/flot/issues/608

似乎Flot图表需要UTC格式的时间。

对我而言,只需添加" timezone:"browser" "在" xaxis "。

添加后,我的" xaxis"如下所示:

 xaxis: {
           mode: "time",
           minTickSize: [1, "day"],
           timeformat: "%d-%b-%y",
           timezone:"browser",
           min: min date value define here,
           max: max date value define here
        }