我正在使用jqplot和dateAxisRenderer来显示x轴上带有日期标签的折线图。但是,我需要定期使用新数据更新该图。调用replot时,绘图不会改变,如下例所示。有什么建议吗?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="../jquery/ui/1.9.2/custom/js/jquery-1.8.3.js"></script>
<script type="text/javascript" src="../jquery/plugins/jqplot/dist/jquery.jqplot.js"></script>
<script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.dateAxisRenderer.js"></script>
<script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.canvasTextRenderer.js"></script>
<script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.canvasAxisTickRenderer.js"></script>
<script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.AxisLabelRenderer.js"></script>
<script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.categoryAxisRenderer.js"></script>
<script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.barRenderer.js"></script>
<script type="text/javascript" src="../jquery/plugins/jqplot/dist/plugins/jqplot.enhancedLegendRenderer.js"></script>
<link rel="stylesheet" type="text/css" href="../jquery/plugins/jqplot/dist/jquery.jqplot.css" />
</head>
<body>
<div id="chartdiv" style="height:400px;width:800px;"></div>
<script type="text/javascript">
$(document).ready(function(){
var line1 = [
[new $.jsDate("2013-01-28 1:10PM"), 1.0],
[new $.jsDate("2013-01-28 1:11PM"), 2.0],
[new $.jsDate("2013-01-28 1:12PM"), 4.0],
[new $.jsDate("2013-01-28 1:13PM"), 8.0],
[new $.jsDate("2013-01-28 1:14PM"), 16.0],
[new $.jsDate("2013-01-28 1:15PM"), 32.0]
];
var plot2 = $.jqplot('chartdiv', [line1] ,{
series:[{lineWidth:4, showMarker:false, renderer:$.jqplot.LineRenderer}],
axesDefaults: {
tickRenderer: $.jqplot.CanvasAxisTickRenderer
},
axes:{
xaxis:{
renderer:$.jqplot.CategoryAxisRenderer,
tickOptions:{
formatString:'%F %X',
angle: -30
}
},
}
});
alert("wait");
line1 = [
[new $.jsDate("2013-01-28 1:10PM"), 32.0],
[new $.jsDate("2013-01-28 1:11PM"), 16.0],
[new $.jsDate("2013-01-28 1:12PM"), 8.0],
[new $.jsDate("2013-01-28 1:13PM"), 4.0],
[new $.jsDate("2013-01-28 1:14PM"), 2.0],
[new $.jsDate("2013-01-28 1:15PM"), 1.0]
];
plot2.data = [line1];
plot2.replot({resetAxes:true});
});
</script>
</body>
</html>
答案 0 :(得分:1)
我最近在jqplot上做了一些工作,发现数据处理中的不一致有点令人沮丧。
给出plot2
的示例:对于条形图,您必须查看plot2.series[i].data
而不是plot2.data
然后replot()
它(参考:http://www.jqplot.com/deploy/dist/examples/selectorSyntax.html)
e.g。为您的代码
...
plot2.series[0].data = [line1];
plot2.replot({resetAxes:true});
...
我试图抽象出不同图表类型的细微差别但是在那之前我通过将data
存储在父对象上来破坏它,摧毁了图,然后使用{{1}重做了图。 }