我正在尝试创建一张包含两条线的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