今天我下载了最新版本的jqPlot并用数据填充了一个Plot,我遇到了DateAxisRenderer“挂断”问题。至少我认为这可能是问题所在。
我尝试注入此修补程序(http://www.cefolger.net/2012/02/jqplot-crashhanginfinite-loop-in.html),但它仍然无法正常工作。
我的设置如下。
<div id="history_chart" stlye="height: 300px; width: 500px;">
</div>
<script type="text/javascript">
$(function(){
var history_data = <?php echo json_encode($history_data); ?>;
var historyDataRenderer = function(){
console.log(history_data);
return history_data;
}
var history_plit = $.jqplot('history_chart',[], {
title: "Tarifhistorie",
dataRenderer: historyDataRenderer,
axes: {
xaxis:{
renderer: $.jqplot.DateAxisRenderer,
tickOptions: '%e.%#m.%Y (%#H:%#M:%#S)'
},
yaxis:{}
}
});
});
</script>
我通过的数据:
[["29.02.2012 16:11", "1"], ["26.03.2012 15:56", "2"], ["26.03.2012 15:57", "6"], ["26.03.2012 15:57", "1"], ["27.03.2012 11:33", "3"], ["27.03.2012 11:36", "1"], ["27.03.2012 11:36", "3"], ["27.03.2012 11:36", "2"], ["27.03.2012 11:36", "1"], ["28.03.2012 11:35", "1"], ["28.03.2012 11:38", "1"], ["28.03.2012 11:59", "1"], ["28.03.2012 12:03", "1"]]
格式化为列表:
- 29.02.2012 16:11,1
- 26.03.2012 15:56,2
- 26.03.2012 15:57,6
- 26.03.2012 15:57,1
- 27.03.2012 11:33,3
- 27.03.2012 11:36,1
- 27.03.2012 11:36,3
- 27.03.2012 11:36,2
- 27.03.2012 11:36,1
- 28.03.2012 11:35,1
- 28.03.2012 11:38,1
- 28.03.2012 11:59,1
- 28.03.2012 12:03,1
删除 tickOptions 并直接添加 history_data + 在 history_data 周围添加括号有效,但我不太高兴,因为日期刻度为 4 天,我需要更精确的刻度。
<script type="text/javascript">
$(function(){
$.jqplot.config.enablePlugins = true;
var history_data = <?php echo json_encode($history_data); ?>;
var historyDataRenderer = function(){
//console.log(history_data);
for(var i=0;i<history_data.length;i++){
var randString = (""+Math.random(1568));
history_data[i][0] = history_data[i][0] + ":"+randString.substring(2, 4);
}
console.log(history_data);
return history_data;
}
historyDataRenderer();
var history_plot = $.jqplot('history_chart', [history_data], {
title: "Tarifhistorie",
/*dataRenderer: historyDataRenderer,*/
axes: {
xaxis:{
renderer: $.jqplot.DateAxisRenderer
},
yaxis:{
min: 0,
max: 10
}
},
highlighter: {
show: true,
sizeAdjust: 7.5
},
cursor: {
show: false
}
});
});
</script>