Javascript jqPlot步骤图未按系列顺序打印

我需要使用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>

$（文档）.ready（函数（）{
变量行1=['2014-01-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]];
变量plot1=$.jqplot（'chart1'，[line1]{
标题：“默认日期轴”，
轴：{xaxis:{渲染器：$.jqplot.DateAxisRenderer}，
系列：[{线宽：1，标记选项：{style:'square'}]
});
});

检查下面的图片。实际步骤图：

但是，如果一个数组向序列中添加了一个新值，则绘图将丢失

代码：

$（文档）.ready（函数（）{
变量行1=['2014-01-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]];
变量plot1=$.jqplot（'chart1'，[line1]{
标题：“默认日期轴”，
轴：{xaxis:{渲染器：$.jqplot.DateAxisRenderer}，
系列：[{线宽：1，标记选项：{style:'square'}]
});
});

图片：

有人能帮我找出哪里出了问题吗？我需要保持阶跃图（一个点连接到列表中的下一个点，以此类推）

---

谢谢您的帮助。

使用

类别AxisRenderer

，它将解决您的问题，然后您不必提供

min

和

max

您可以继续添加所需的数据，因为它将始终正确地绘制数据

---

您需要将sort属性设置为false，如下所示：

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

---

我在一个灌溉项目中工作，需要动态循环灌溉区，很抱歉，我没有名声发布灌溉区的照片。

确实工作过，但后来我丢失了所有DateTime自动轴格式和此处显示的一些处理（此代码用于隔离行为），由于我已将渲染器更改为非日期时间格式。。。我真的很想知道为什么jqPlot渲染不正确。。。经过一些研究，我发现这只发生在Chrome上，而不是IE上。。。仍然在寻找一个可以保存我的日期/时间数据的解决方案。在答案中添加一些解释（如果链接不起作用，您的答案会有意义），或者将其作为注释。

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

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