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>

图片：

有人可以帮我找出问题所在吗？我需要保留步骤图（一个点连接到列表中的下一个点，依此类推）。

感谢您的帮助。

Answer 1

您需要将sort属性设置为false，请查看：

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

通过这个你可以自己制作序列。

我正在一个灌溉项目工作，需要动态地循环灌溉区域，抱歉，但我没有声誉来张贴它的图片。

Answer 2

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