logo标签列表

JQPlot多线图-按小时比较数据

jqueryjqplot
3
我正在尝试创建一张包含两条线的JQ Plot图表。第一条线显示每小时的第1天的数据，而第二条线显示每小时的第2天的数据。当我创建这两条线的图表时，我希望其中一条线在另一条线的上方以显示小时数据的比较情况。但是我看到这两条线在图表上是并排显示的。
我在此处提供了一个示例链接。
请告诉我如何调整图表选项以使其中一条线显示在另一条线的上方。谢谢。
以下是我的代码：
<html>
<head>
    <script src="http://www.jqplot.com/deploy/dist/jquery.min.js"></script>
    <script src="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.js"></script>
    <script src=""></script>
    <link class="include" rel="stylesheet" type="text/css" href="http://www.jqplot.com/deploy/dist/jquery.jqplot.min.css" />
    <script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.cursor.min.js"></script>
    <script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.dateAxisRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.logAxisRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasTextRenderer.min.js"></script>
    <script class="include" type="text/javascript" src="http://www.jqplot.com/deploy/dist/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
    <script type="text/javascript">
$(document).ready(function(){
    line1 = [["6/22/2009 10:00",425.32], ["6/22/2009 11:00",424.84], ["6/22/2009 12:00",417.23], ["6/22/2009 13:00",390], 
    ["6/22/2009 14:00",393.69], ["6/22/2009 15:00",392.24], ["6/22/2009 16:00",369.78], ["6/22/2009 17:00",330.16], ["6/22/2009 18:00",308.57], 
    ["6/22/2009 19:00",346.45], ["6/22/2009 20:00",371.28], ["6/22/2009 21:00",324.7]];

        line2 = [["6/23/2009 10:00",325.32], ["6/23/2009 11:00",324.84], ["6/23/2009 12:00",217.23], ["6/23/2009 13:00",190], 
    ["6/23/2009 14:00",593.69], ["6/23/2009 15:00",292.24], ["6/23/2009 16:00",369.78], ["6/23/2009 17:00",330.16], ["6/23/2009 18:00",308.57], 
    ["6/23/2009 19:00",446.45], ["6/23/2009 20:00",241.28], ["6/23/2009 21:00",624.7]];

    var plot1 = $.jqplot('chart1', [line1,line2], { 
        title: 'XYZ, Inc.', 
        series: [{ 
            label: 'XYZ, Inc.', 
            neighborThreshold: -1 
        }], 
        axes: { 
            xaxis: { 
                renderer:$.jqplot.DateAxisRenderer,
                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                tickOptions: {
                  angle: -30
                } 
            }, 
            yaxis: {  
                renderer: $.jqplot.LogAxisRenderer,
                tickOptions:{ prefix: '$' } 
            } 
        }, 
        cursor:{
            show: true, 
            zoom: true
        } 
    });
});
</script>

</head>
<body>
    <div id="chart1" style="height:200px; width:600px;"></div>
</body>
</html>​
如果您正在使用dateAxisRenderer，我认为这是不可能的。一个可能的解决方案是使用没有dateAxisRenderer的折线图。 - Arun P Johny
你意识到你所要求的并没有意义吗？如果数据来自于两个不同的日期，那么时间序列图应该将它们并排显示，而不是重叠在一起。你需要一个带有两个不同水平轴的图表。 - Mark E. Haase
我知道这是一个老问题。如果您认为我的答案正确，您能否将其标记为正确答案？ - philip_kobernik
3个回答
6
我曾经也遇到过这个问题。
解决方法是定义第二个x轴，我们将其命名为x2axis。
然后在您的系列配置中，指定其中一个系列将使用第二个x轴。
var plot1 = $.jqplot('chart1', [line1,line2], { 
    title: 'XYZ, Inc.', 
    series: [{ 
        label: 'primary series', 
        neighborThreshold: -1,
        xaxis: 'xaxis'
    }, {
        label: 'comparative series',
        xaxis: 'x2axis'
    }], 
    axes: { 
        xaxis: { 
            renderer:$.jqplot.DateAxisRenderer,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
              angle: -30
            } 
        },
        x2axis: {
            renderer:$.jqplot.DateAxisRenderer,
            tickRenderer: $.jqplot.CanvasAxisTickRenderer,
            tickOptions: {
              angle: -30
            } 
        },
        yaxis: {  
            renderer: $.jqplot.LogAxisRenderer,
            tickOptions:{ prefix: '$' } 
        } 
    }, 
    cursor:{
        show: true, 
        zoom: true
    } 
});

这里有一个JS Fiddle演示解决方案

如果您的数据集长度不同，将会有额外的问题需要解决。请查看我的博客文章以获取更多详细信息。

干杯！

2
我认为如果你正在使用dateAxisRenderer，这是不可能的。一个可能的解决方案是使用没有dateAxisRenderer的折线图。
例如：
line1 = [[10,425.32], [11,424.84], [12,417.23], [13,390], [14,393.69], [15,392.24], [16,369.78], [17,330.16], [18,308.57], [19,346.45], [20,371.28], [21,324.7]];

line2 = [[10,325.32], [11,324.84], [12,217.23], [13,190], [14,593.69], [15,292.24], [16,369.78], [17,330.16], [18,308.57], [19,446.45], [20,241.28], [21,624.7]];

var plot3 = $.jqplot('chart1', [line1, line2 ], { 
  title: 'XYZ, Inc.', 
    series: [{ 
        label: 'XYZ, Inc.', 
        neighborThreshold: -1 
    }], 
    axes: {
        xaxis: {
            min: 1,
            max: 24,
            tickInterval: 2,
            tickOptions:{ suffix: ':00' } 
        },
         yaxis: {  
            renderer: $.jqplot.LogAxisRenderer,
            tickOptions:{ prefix: '$' } 
        } 
    },
    cursor:{
        show: true, 
        zoom: true
    } 
});
2

我试过了，可以运行。

例子：

var line1=[['2008-06-30 8:00AM',4], ['2008-7-14 8:00AM',6.5], ['2008-7-28 8:00AM',5.7], ['2008-8-11 8:00AM',9], ['2008-8-25 8:00AM',8.2]];
var line2=[['2008-06-30 8:00AM',6], ['2008-7-14 8:00AM',8.5], ['2008-7-28 8:00AM',8.7], ['2008-8-11 8:00AM',12], ['2008-8-25 8:00AM',8.2]];

var plot2 = $.jqplot('chart3', [line1,line2], {
    title:'Customized Date Axis', 
    axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer, 
          tickOptions:{formatString:'%b %#d, %#I %p'},
          min:'June 16, 2008 8:00AM', 
          tickInterval:'2 weeks'
        }
    },
    series:[{lineWidth:4, markerOptions:{style:'square'}}]
});
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接