c# - jqPlot，在 x 轴上绘制日期，在 y 轴上绘制时间

Question

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

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

这是咖啡脚本...

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

这是转换为 JavaScript 的 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,
      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方法（改编自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 个前导零。