jqPlot步骤图不按顺序打印

我需要使用jQPlot构建步骤图。我的X轴是日期/时间，我的Y轴是一个数字。jqPlot步骤图不按顺序打印

这样做原型一切都正常运行：

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

<link href="@Url.Content("~/Scripts/jqplot/jquery.jqplot.min.css")" rel="stylesheet" media="screen"> 


<!-- Plot --> 
<div id="chart1"></div> 

<br /> 
<br /> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var line1 = [['2014-01-15 15:10:01', 21], 
        ['2014-01-15 15:10:12', 21], 
        ['2014-01-15 15:10:12', 22], 
        ['2014-01-15 15:10:14', 22], 
        ['2014-01-15 15:10:14', 21], 
        ['2014-01-15 15:10:17', 21], 
        ['2014-01-15 15:10:17', 22], 
        ['2014-01-15 15:10:23', 22], 
        ['2014-01-15 15:10:23', 18], 
        ['2014-01-15 15:10:28', 18]]; 

     var plot1 = $.jqplot('chart1', [line1], { 
      title: 'Default Date Axis', 
      axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } }, 
      series: [{ lineWidth: 1, markerOptions: { style: 'square' } }] 
     }); 
    }); 

</script>

检查下面的图片。一个真正的一步剧情：

enter image description here

但如果添加一个新的价值的系列，剧情会丢失。

代码：

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

<link href="@Url.Content("~/Scripts/jqplot/jquery.jqplot.min.css")" rel="stylesheet" media="screen"> 


<!-- Plot --> 
<div id="chart1"></div> 

<br /> 
<br /> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     var line1 = [['2014-01-15 15:10:01', 21], 
        ['2014-01-15 15:10:12', 21], 
        ['2014-01-15 15:10:12', 22], 
        ['2014-01-15 15:10:14', 22], 
        ['2014-01-15 15:10:14', 21], 
        ['2014-01-15 15:10:17', 21], 
        ['2014-01-15 15:10:17', 22], 
        ['2014-01-15 15:10:23', 22], 
        ['2014-01-15 15:10:23', 18], 
        ['2014-01-15 15:10:28', 18], 
        ['2014-01-15 15:10:28', 21]]; 

     var plot1 = $.jqplot('chart1', [line1], { 
      title: 'Default Date Axis', 
      axes: { xaxis: { renderer: $.jqplot.DateAxisRenderer } }, 
      series: [{ lineWidth: 1, markerOptions: { style: 'square' } }] 
     }); 
    }); 

</script>

图片：

enter image description here

有人能帮我找出what's回事？我需要保留步骤图（一点连接到列表中的下一个点等等）。

感谢您的任何帮助。

来源

2014-01-15 Mendes

使用CategoryAxisRenderer，它会解决你的问题，然后你不必提供min和max。

您可以继续添加尽可能多的数据，它会始终正确地绘制它。

Jsfiddle link

var line1 = [['2014-01-15 15:10:01', 21], 
      ['2014-01-15 15:10:12', 21], 
      ['2014-01-15 15:10:12', 22], 
      ['2014-01-15 15:10:14', 22], 
      ['2014-01-15 15:10:14', 21], 
      ['2014-01-15 15:10:17', 21], 
      ['2014-01-15 15:10:17', 22], 
      ['2014-01-15 15:10:23', 22], 
      ['2014-01-15 15:10:23', 18], 
      ['2014-01-15 15:10:28', 18], 
      ['2014-01-15 15:10:28', 21]]; 

     var plot1 = $.jqplot('chart1', [line1], { 
      title: 'Default Date Axis', 
      axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer } }, 
      series: [{ lineWidth: 1, markerOptions: { style: 'square' } }] 
     });

来源

2014-01-16 19:08:34 Gyandeep

的确有效，但之后我失去了我所有的DateTime自动轴格式和现在显示的一些处理（此代码用于隔离行为），因为我已将渲染器更改为非DateTime格式......我真的希望找出为什么jqPlot不能正确呈现......经过一番研究后，我发现这只发生在Chrome浏览器，而不是IE浏览器......仍然在寻找一种解决方案来保存我的日期/时间数据。 – Mendes

你需要的那种属性设置为false，请看：

http://www.jqplot.com/docs/files/jqplot-core-js.html#jqPlot.sortData

有了这个，你可以制作自己的序列。

我在一个灌溉项目工作，需要动态地灌溉灌溉面积，抱歉，但我没有声望发布它的照片。

来源

2014-03-05 18:24:27 willgonc

应该在评论 – Pawan

在答案中提供一些解释（如果链接不起作用，您的回答将有意义），或者将其作为评论。 –

jqPlot步骤图不按顺序打印

回答

相关问题