我使用morris.js在图表上绘制了一段时间内的一些统计数据。
$(document).ready(function() {
if($('#time-graph').length) {
var week_data = <?php echo($stat_array)?>;
Morris.Line({
element : 'time-graph',
data : week_data,
xkey : 'period',
ykeys : 'temp_avg',
labels : ['temp_avg','temp_avg'],
events : ['2014-06-01 00:00:01', '2014-6-30 23:55:55'],
ymin : -1.0,
ymax : 50.0
});
}
$ stat_array包含一个json字符串,其格式如下,该字符串在应用程序的较早位置进行了检索
[{"period":"2014-06-24 18:37:44","temp_avg":"46.845"},{"period":"2014-06-24 18:38:01","temp_avg":"47.28"},{"period":"2014-06-24 18:40:01","temp_avg":"47.185"},{"period":"2014-06-24 18:42:01","temp_avg":"47.4675"},{"period":"2014-06-24 18:44:01","temp_avg":"47.3125"},{"period":"2014-06-24 18:46:01","temp_avg":"48"},{"period":"2014-06-24 18:48:01","temp_avg":"47.2175"},{"period":"2014-06-24 18:50:01","temp_avg":"48"},{"period":"2014-06-24 18:52:01","temp_avg":"48.095"}];
但是图形显示格式不正确,如下所示
如果有人可以指出我要去哪里,那将是很好的:D
实际上,您只是缺少了几件事,首先,删除;
对象上的分号。
其次,我不知道这是否是错字,但您错过了的结束语$(document).ready({});
。
最后,如果您的数据混乱在一个特定区域上,请不要感到惊讶,因为您的数据似乎2014-06-24 18:MM:SS
只是存在差异。我只是调整了范围,以使您可以清楚地看到折线图。样本输出
例子:
<?php $stat_array = '[{"period":"2014-06-24 18:37:44","temp_avg":"46.845"},{"period":"2014-06-24 18:38:01","temp_avg":"47.28"},{"period":"2014-06-24 18:40:01","temp_avg":"47.185"},{"period":"2014-06-24 18:42:01","temp_avg":"47.4675"},{"period":"2014-06-24 18:44:01","temp_avg":"47.3125"},{"period":"2014-06-24 18:46:01","temp_avg":"48"},{"period":"2014-06-24 18:48:01","temp_avg":"47.2175"},{"period":"2014-06-24 18:50:01","temp_avg":"48"},{"period":"2014-06-24 18:52:01","temp_avg":"48.095"}]'; ?>
<div id="time-graph"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="http://cdn.oesmith.co.uk/morris-0.4.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
Morris.Line({
element: 'time-graph',
data: <?php echo $stat_array; ?>,
xkey: 'period',
ykeys: ['temp_avg'],
labels: ['temp_avg'],
events : ['2014-06-24 18:00:00', '2014-6-24 18:59:59'],
ymin : -1.0,
ymax : 50.0
});
});
</script>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句