Question

我有以下jqPlot代码没有做我期望的事情。我需要用给定的点绘制一个简单的步骤图：

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

该图未显示步骤图。它会在图表的右上角显示所有点。

请查看以下小提琴：JsFiddle

提前感谢您提供任何帮助。

Answer 1

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

        var plot1 = $.jqplot('chart1', [line1], {
            title: 'Default Date Axis',
            axes: { xaxis: { renderer: $.jqplot.CategoryAxisRenderer } },
            series: [{ lineWidth: 1, markerOptions: { style: 'square' } }]
        });

Answer 2

试试这个：

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',
            gridPadding:{right:35},
            axes: {
                xaxis: { 
                    renderer: $.jqplot.DateAxisRenderer,
                    min:'Jan 15, 2014 15:10:00',
                    max:'Jan 15, 2014 15:11:00',
                    tickOptions: { formatString: '%M' }
                } 
            },
            series: [{ lineWidth: 1, markerOptions: { style: 'square' } }]

});

jqPlot简单的步骤图，日期轴没有绘图

2 个答案: