2013-12-11 54 views
0

I'm设计具有jqGrid的图表从MVC控制器得到一个网页第二基础数据。jqPlot显示不工作

我不能让jqPlot正确绘制秒的数据。它正确绘制了一些数据(图形的右侧),然后在同一个X轴上绘制了几个点,这是不正确的。从来就向下钻取的问题为以下代码:

[编辑] 向下钻取的问题。

JavaScript代码:

<script type="text/javascript" src="~/Scripts/jqplot/jquery.jqplot.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.highlighter.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.cursor.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script> 
<script type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.pieRenderer.min.js"></script> 

<div id="chart"></div> 

<script type="text/javascript" src="~/Scripts/jqplot/jquery.jqplot.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.highlighter.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.cursor.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script> 
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.json2.min.js"></script> 

<script type="text/javascript"> 

    $(document).ready(function() { 

     var line1 = [['2013-12-11 19:57.28', 10], 
        ['2013-12-11 19:57.27', 20], 
        ['2013-12-11 19:57.26', 30], 
        ['2013-12-11 19:57.25', 40], 
        ['2013-12-11 19:57.24', 50], 
        ['2013-12-11 19:57.23', 60], 
        ['2013-12-11 19:57.22', 70], 
        ['2013-12-11 19:57.21', 80], 
        ['2013-12-11 19:57.20', 90], 
        ['2013-12-11 19:57.19', 10], 
        ['2013-12-11 19:57.18', 20], 
        ['2013-12-11 19:57.17', 30], 
        ['2013-12-11 19:57.16', 40], 
        ['2013-12-11 19:57.15', 50], 
        ['2013-12-11 19:57.14', 60], 
        ['2013-12-11 19:57.14', 70], 
        ['2013-12-11 19:57.12', 80], 
        ['2013-12-11 19:57.11', 90], 
        ['2013-12-11 19:57.10', 10], 
        ['2013-12-11 19:57.09', 20], 
        ['2013-12-11 19:57.08', 30], 
        ['2013-12-11 19:57.07', 40], 
        ['2013-12-11 19:57.06', 50], 
        ['2013-12-11 19:57.05', 60], 
        ['2013-12-11 19:57.04', 70], 
        ['2013-12-11 19:57.03', 80], 
        ['2013-12-11 19:57.02', 90]]; 

     options = { 
      title: 'Tendência Dados de Processo', 
      height: 500, 
      axes: { 
       xaxis: { 
        renderer: $.jqplot.DateAxisRenderer, 
        tickRenderer: $.jqplot.CanvasAxisTickRenderer, 
        tickOptions: { 
         angle: -90, 
         fontSize: '8pt', 
        } 
       }, 
       yaxis: { 
        tickOptions: { 
         formatString: '%.2f', 
         fontSize: '8pt' 
        } 
       } 
      }, 
      cursor: { 
       show: true, 
       showVerticalLine: true, 
       showTooltipDataPosition: true, 
       cursorLegendFormatString: '%#d %H:%M:%S', 

      }, 
      legend: { 
       show: true, 
       location: 's', 
       xoffset: 20, 
       yoffset: 20 
      }, 
      highlighter: { 
       show: true 
      } 
     } 

     var plot = $.jqplot('chart', [line1], options); 

    }); 


</script> 

jqPlot行为:

enter image description here

我不知道我做错了,但我需要得到这个工作的图快。任何帮助赞赏。

回答

1

输入 - 日期需要在标准格式。 jqPlot传递值$.jsDate(),它试图许多不同的格式,但它们都没有允许时期到分秒之间来。

改变所有的.:,和它的作品:

var line1 = [['2013-12-11 19:57:28', 10], 
      ['2013-12-11 19:57:27', 20], 
      ['2013-12-11 19:57:26', 30], 
      ['2013-12-11 19:57:25', 40], 
      ['2013-12-11 19:57:24', 50], 
      ['2013-12-11 19:57:23', 60], 
      ... 

http://jsfiddle.net/R4Keh/

+0

非常,非常棘手,但你是对的。我们不会使用'。'分隔秒,而是使用“:” - 可能需要一段时间才能弄清楚 - 非常感谢。得到我的信用! – Mendes

+0

更深入地看,现在的顺序是正确的,但我没有绘制正确的X tick值。它显示的不是19:57Hs的X轴,它是一个在00:00和01:50Hs之间的轴。 – Mendes

+0

自动选择刻度格式以匹配给定值的范围。如果所有的点都在同一小时内,它将只显示分钟和秒。你可以自己选择一个刻度格式,在tick选项中设置'formatString:'%#d%H:%M:%S''。看看http://jsfiddle.net/R4Keh/1/ –