jqPlot, plot date on xaxis and time on 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.

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

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"
    )

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"
    }
  }
});

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/

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.

Any help would be great!

回答1:

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

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

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);        
}

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.

来源：https://stackoverflow.com/questions/14648685/jqplot-plot-date-on-xaxis-and-time-on-yaxis

标签

coffeescript

jqplot