jqPlot，在xaxis上绘制日期，在yaxis上绘制时间 [英] jqPlot, plot date on xaxis and time on yaxis

问题描述

我正在尝试使用jqPlot绘制某人完成某事所花费的时间。在xaxis上，日期显示正确。但是，在yaxis上，我想显示小时，分钟，秒。

I'm trying to plot using jqPlot the amount of time it takes for someone to complete something. On the xaxis I have the dates displaying correctly. However, on the yaxis I want to show the hour, minutes, seconds. No matter what I try it doesn't show correctly.

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

The screen capture belows shows the ticks mapping on the yaxis.

这里是CoffeeScript。 。

Here's the 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 ...

Here's the CoffeeScript converted to 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，所以我确定我做错了...

I have created a jsfiddle but, I can't seem to get it to run. I've never used jsfiddle before so I'm sure I'm doing something wrong...

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

我已经尝试了DateAxisRenderer yaxis，但时间实际上并不是日期/时间本身，而是仅一个小时，几分钟，几秒钟就可以使某人完成。

I've tried the DateAxisRenderer on the yaxis but, the time is not really a date/time per-se but just the hours, minutes, seconds it has take someone to complete.

任何帮助都会很棒！

推荐答案

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

When you are configuring your yaxis, you also need to specify the tickOptions:

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

这将执行<$ c $每个c> MillisecondsToDuration 方法（改编自在JavaScript中计算时间跨度）

What this will do is execute the MillisecondsToDuration method (adapted from Calculate timespan in JavaScript) each time a tick is rendered.

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个前导零。

The above method assumes that your time values are in milliseconds - you will need to adjust this if not. The %02d means that each value will be formatted with up to 2 leading zeros.

这篇关于jqPlot，在xaxis上绘制日期，在yaxis上绘制时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！