jqPlot 단계 차트가 시리즈 순서로 플롯되지 않음

Question

jQPlot을 사용하여 단계 차트를 작성해야합니다. 내 X 축은 날짜/시간이고 Y 축은 숫자입니다. 이 프로토 타입의 모든 일을

는 잘 실행 : 이미지 아래

<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> 

확인합니다. 실제 단계 줄거리 :

그러나이 시리즈에 새 값을 추가하는 경우, 플롯이 분실

.

코드 :

<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> 

이미지 :

누군가가 나에게 잘못 가고 what's을 찾는 데 도움이 될 수 있습니까? 나는 계단 음모를 유지할 필요가있다 (한 지점은 목록에서 다음 지점으로 연결되는 등).

도움 주셔서 감사합니다.

Answer 1

CategoryAxisRenderer을 사용하면 문제가 해결되고 min 및 max을 제공하지 않아도됩니다.

원하는대로 많은 데이터를 계속 추가하여 항상 올바르게 그려 볼 수 있습니다.

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' } }] 
     }); 

Answer 2

Jsfiddle link

당신은 false로 정렬 속성을 설정해야 볼 :

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

을이 당신과 함께 자신의 순서를 만들 수 있습니다.

저는 관개 프로젝트에서 일하고 있으며, 관개 영역을 동적으로 순환시켜야합니다. 미안하지만 나는 그 그림을 게시 할 평판이 없습니다.