Question

我正面临着使用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

谢谢，克里斯托夫

Answer 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);
?>

轴标签未对齐（jqPlot）

1 个答案: