Question

我正在尝试使用jqPlot绘制某人完成某些事情所需的时间。在xaxis上，我正确显示日期。但是，在yaxis上我想显示小时，分钟，秒。无论我尝试什么，它都没有正确显示。

下面的屏幕截图显示了y轴上的刻度线映射。

这是CoffeeScript ......

    $.jqplot(
        "elemid"
        [["2013-02-01 01:30:28 AM", 97640000],["2013-02-01 01:31:38 AM", 166270000]]
        axes:
            xaxis:
                min: data.XAxisMin
                max: data.XAxisMax
                tickInterval: "1 month"
                tickOptions:
                    formatString: "%b %#d"
                renderer: $.jqplot.DateAxisRenderer
            yaxis:
                min: 0
                #tickOptions:
                     #formatString: "%#Mm"
                tickRenderer: $.jqplot.canvasAxisTickRenderer
                #renderer: $.jqplot.DateAxisRenderer
        highlighter:
            show: true
            sizeAdjust: 7.5
        series:
            lineWidth: 4
            label: series.Label
            markerOptions: 
                style: "square"
    )

这是CoffeeScript转换为JavaScript ...

$.jqplot("elemid", [["2013-02-01 01:30:28 AM", 97640000], ["2013-02-01 01:31:38 AM", 166270000]], {
  axes: {
    xaxis: {
      min: data.XAxisMin,
      max: data.XAxisMax,
      tickInterval: "1 month",
      tickOptions: {
        formatString: "%b %#d"
      },
      renderer: $.jqplot.DateAxisRenderer
    },
    yaxis: {
      min: 0,
      tickRenderer: $.jqplot.canvasAxisTickRenderer
    }
  },
  highlighter: {
    show: true,
    sizeAdjust: 7.5
  },
  series: {
    lineWidth: 4,
    label: series.Label,
    markerOptions: {
      style: "square"
    }
  }
});

我创建了一个jsfiddle但是，我似乎无法让它运行。我之前从未使用过jsfiddle所以我确定我做错了...

http://jsfiddle.net/uM8yu/5/

我在yaxis上尝试了DateAxisRenderer但是，时间不是真正的日期/时间本身，而只是需要有人完成的小时，分钟，秒。

任何帮助都会很棒！

Answer 1

配置yaxis时，您还需要指定tickOptions：

tickOptions: {
    formatter: function(format, value){
        return MillisecondsToDuration(value);
    }
}

这样做的是每次呈现勾号时执行MillisecondsToDuration方法（改编自Calculate timespan in JavaScript）。

function MillisecondsToDuration(n) {
    var dtm = new Date();
    dtm.setTime(n);

    var hours = Math.floor(n / 3600000);
    var minutes = dtm.getMinutes();
    var seconds = dtm.getSeconds();

    return $.jqplot.sprintf('%02d:%02d:%02d', hours, minutes, seconds);        
}

上述方法假设您的时间值以毫秒为单位 - 如果不是，则需要调整此值。 %02d表示每个值的格式最多为2个前导零。

jqPlot，x轴上的绘图日期和y轴上的时间

1 个答案: