0
I'm设计具有jqGrid的图表从MVC控制器得到一个网页第二基础数据。jqPlot显示不工作
我不能让jqPlot正确绘制秒的数据。它正确绘制了一些数据(图形的右侧),然后在同一个X轴上绘制了几个点,这是不正确的。从来就向下钻取的问题为以下代码:
[编辑] 向下钻取的问题。
JavaScript代码:
<script type="text/javascript" src="~/Scripts/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="../src/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.pieRenderer.min.js"></script>
<div id="chart"></div>
<script type="text/javascript" src="~/Scripts/jqplot/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.highlighter.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.cursor.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="~/Scripts/jqplot/plugins/jqplot.json2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var line1 = [['2013-12-11 19:57.28', 10],
['2013-12-11 19:57.27', 20],
['2013-12-11 19:57.26', 30],
['2013-12-11 19:57.25', 40],
['2013-12-11 19:57.24', 50],
['2013-12-11 19:57.23', 60],
['2013-12-11 19:57.22', 70],
['2013-12-11 19:57.21', 80],
['2013-12-11 19:57.20', 90],
['2013-12-11 19:57.19', 10],
['2013-12-11 19:57.18', 20],
['2013-12-11 19:57.17', 30],
['2013-12-11 19:57.16', 40],
['2013-12-11 19:57.15', 50],
['2013-12-11 19:57.14', 60],
['2013-12-11 19:57.14', 70],
['2013-12-11 19:57.12', 80],
['2013-12-11 19:57.11', 90],
['2013-12-11 19:57.10', 10],
['2013-12-11 19:57.09', 20],
['2013-12-11 19:57.08', 30],
['2013-12-11 19:57.07', 40],
['2013-12-11 19:57.06', 50],
['2013-12-11 19:57.05', 60],
['2013-12-11 19:57.04', 70],
['2013-12-11 19:57.03', 80],
['2013-12-11 19:57.02', 90]];
options = {
title: 'Tendência Dados de Processo',
height: 500,
axes: {
xaxis: {
renderer: $.jqplot.DateAxisRenderer,
tickRenderer: $.jqplot.CanvasAxisTickRenderer,
tickOptions: {
angle: -90,
fontSize: '8pt',
}
},
yaxis: {
tickOptions: {
formatString: '%.2f',
fontSize: '8pt'
}
}
},
cursor: {
show: true,
showVerticalLine: true,
showTooltipDataPosition: true,
cursorLegendFormatString: '%#d %H:%M:%S',
},
legend: {
show: true,
location: 's',
xoffset: 20,
yoffset: 20
},
highlighter: {
show: true
}
}
var plot = $.jqplot('chart', [line1], options);
});
</script>
jqPlot行为:
我不知道我做错了,但我需要得到这个工作的图快。任何帮助赞赏。
非常,非常棘手,但你是对的。我们不会使用'。'分隔秒,而是使用“:” - 可能需要一段时间才能弄清楚 - 非常感谢。得到我的信用! – Mendes
更深入地看,现在的顺序是正确的,但我没有绘制正确的X tick值。它显示的不是19:57Hs的X轴,它是一个在00:00和01:50Hs之间的轴。 – Mendes
自动选择刻度格式以匹配给定值的范围。如果所有的点都在同一小时内,它将只显示分钟和秒。你可以自己选择一个刻度格式,在tick选项中设置'formatString:'%#d%H:%M:%S''。看看http://jsfiddle.net/R4Keh/1/ –