jqPlot - Y轴上的时间值

时间:2014-04-26 12:38:47

标签: jquery jqplot

我需要创建图表,其中X轴为日期,Y轴为时间。

我的JS代码是:

jQuery(document).ready(function ($) {
   var data = [["2013-04-25","00:11.557"],["2013-04-25","00:15.569"],["2013-04-25","00:11.733"],["2013-04-25","00:13.023"],["2014-04-26","00:22.333"]];
   var plot1 = $.jqplot('chartdiv', [data], {
     title:'Default Date Axis',
     axes:{xaxis:{renderer:$.jqplot.DateAxisRenderer}},
     series:[{lineWidth:4, markerOptions:{style:'square'}}]
     });
 });

日期在X轴上正确显示,但我不知道如何在Y轴上显示这些值。

如何在jqPlot插件中完成?

1 个答案:

答案 0 :(得分:2)

我在这里找到了问题。

此处的主要问题是y-axis仅采用numeric11.55715.569值,等等。

另外,我需要为tickOptions添加额外的x-axis属性:

tickOptions:{formatString:'%Y-%m-%d'}

以下是我的工作:

jQuery(document).ready(function($){ 
  var data = [["2013-04-25",11.557],["2013-04-25",15.569],["2013-04-25",11.733],["2013-04-25",13.023],["2013-04-26",22.333]];
  var plot1 = $.jqplot('chartdiv', [data], {
    title: 'Default Date Axis',
    axes:{
      xaxis: { 
        renderer: $.jqplot.DateAxisRenderer,
        tickOptions:{formatString:'%Y-%m-%d'}       
      }
    },
    series: [{ lineWidth: 4, markerOptions: { style:'square' }}]
  });
});

<强> Working DEMO Link