jqPlot步骤图没有按顺序绘制

问题描述

我需要使用jQPlot构建步骤图。我的X轴是日期/时间，我的Y轴是一个数字。

I need to build a step chart using jQPlot. My X-Axis is Date/Time and my Y-Axis is a number.

做这个原型一切正常：

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

检查下图。一个真正的步骤图：

Check the image below. A real step plot:

但如果为系列添加新值，则情节会丢失。

But If a add a new value to the series, the plot gets lost.

代码：

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

图片：

有人可以帮我找出什么出错了？我需要保留步骤图（一个点连接到列表中的下一个点，依此类推）。

Can someone help me to find out what´s going wrong ? I need to keep the step plot (one point connecting to next point in list and so forth).

感谢您的帮助。

推荐答案

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

Use CategoryAxisRenderer, it will solve your problem and then you dont have to supply min and max.

您可以继续添加所需的数据将始终正确绘制。

You can keep on adding as much data you want it will always plot it correctly.

Jsfiddle链接

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

这篇关于jqPlot步骤图没有按顺序绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！