我在使用 jqplot 格式化 y 轴时遇到了一些问题。y 轴的标签位于图表后面。我已经尝试了很多东西(调整css文件但没有任何帮助)。我希望你能帮助我。
我的 html 和 java 脚本代码:
<html>
<head>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/jquery.jqplot.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.json2.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.dateAxisRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.canvasTextRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.canvasAxisLabelRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.canvasAxisTickRenderer.min.js"></script>
<script type="text/javascript" src="./js/plugins/jqplot.cursor.min.js"></script>
<link rel="stylesheet" type="text/css" hrf="./js/jquery.jqplot.css"/>
<script type="text/javascript">
$(document).ready(function(){
var sineRenderer = function() {
var data = [[]];
var jsonData = $.ajax({
url: "http://127.0.0.1/beaglemeter/getData.php",
dataType:"json",
async: false
}).responseText;
data = JSON.parse(jsonData);
return [data]; //brackets have to be added in order to fulfill the required data format
};
// we have an empty data array here, but use the "dataRenderer"
// option to tell the plot to get data from our renderer.
var plot1 = $.jqplot('chart_div',[],{
title: 'BeagleMeter',
gridPadding:{left:75,right:25,top:35,bottom:35},
axes:{
xaxis:{
label:'Date/Time',
renderer:$.jqplot.DateAxisRenderer,
tickOptions:{angle: -40, fontFamily: 'Arial', fontSize: '11pt',labelPosition:'middle'},
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
},
yaxis:{
label:'Power in W',
tickOptions:{fontFamily: 'Arial', fontSize: '11pt'},
tickRenderer:$.jqplot.CanvasAxisTickRenderer,
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
}
},
cursor:{
show:true,
zoom:true,
showTooltip:false
},
dataRenderer: sineRenderer,
series:[{lineWidth:2, showMarker:false}]
});
});
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<center>
<div id="chart_div" style="height:400px;width:80%"></div>
</center>
</body>
</html>
这是它的外观: https ://drive.google.com/file/d/0B6Nf7EU4lCsNLThESGJXVEZjQjA/edit?usp=sharing
谢谢,克里斯托夫