轴的标签没有很好地对齐（jqPlot）答案

【问题标题】：Labels of axis not well aligned (jqPlot)轴的标签没有很好地对齐（jqPlot）
【发布时间】：2013-11-11 22:17:02
【问题描述】：

我在使用 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

谢谢，克里斯托弗

【问题讨论】：

标签： jqplot

【解决方案1】：

我想通了（实际上是巧合；-)。引用 css 文件的代码行有一个错字：hrf 而不是 href。这是正确的：

<link rel="stylesheet" type="text/css" href="./js/jquery.jqplot.css"/>

此外，我在此处添加了 getData.php 文件，以便其他人可以将代码作为完整的工作示例回收：

<?php 
header('Content-Type: application/json');
date_default_timezone_set('Europe/Berlin');

$channel = $_GET["channel"];
$period = $_GET["period"];
$begin = $_GET["begin"];

$beginUTS = strtotime($begin);
$endUTS = $beginUTS + 86400;

if ($db = new SQLite3('NameOfDatabaseFile')) { 
    $result = $db->query("SELECT * FROM 'table' LIMIT 0, 10000");
    $rows = array();
    while($row = $result->fetchArray(SQLITE3_ASSOC)) {
        //$rows[] = array($row['timestamp'], $row['value']);
        $rows[] = array(date("Y-m-d H:i", $row['timestamp']), $row['value']);
        //date("H:i:s - m.d.y", $timestamp));
        //$rows[] = $row;
    }
} else {
    die($sqliteerror);
}

print json_encode($rows);
?>

【讨论】：