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步驟圖不按順序打印

回答

相關問題