Question

我正在进行使用flot显示数据所需的温度项目。我发现那个人和我做的项目差不多。这是链接：temperature jquery flot

在flot代码中，我用一些我想要放入的数据替换了一些代码。（我只替换了两个地方，没有获得php值以使其变得简单），如

var dat = [ [123456789, 20.9],[1234654321, 22.1] ];
yaxis: { min: 20, max: 20>, tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) +"°C " }},

以下是代码：当我显示html页面时没有任何反应。请帮忙!!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Flot For Project</title>  



    <script src="jquery.js" language="javascript" type="text/javascript"></script>  
    <script src="jquery.flot.js" language="javascript" type="text/javascript"></script>  
    <!--[if IE]><script language="javascript" type="text/javascript" src="excanvas.pack.js"></script><![endif]-->  

        <script type="text/javascript" src="jquery.flot.js"></script>
    <script type="text/javascript" src="jquery.flot.time.js"></script>   
    <script type="text/javascript" src="jquery.flot.symbol.js"></script>
    <script type="text/javascript" src="jquery.flot.axislabels.js"></script>
    <script type="text/javascript" src="jquery.colorhelpers.js"></script>
    <script type="text/javascript" src="jquery.flot.canvas.js"></script>
    <script type="text/javascript" src="jquery.flot.categories.js"></script>
    <script type="text/javascript" src="jquery.flot.crosshair.js"></script>
    <script type="text/javascript" src="jquery.fillbetween.js"></script>
       <script type="text/javascript" src="jquery.flot.image.js"></script>
       <script type="text/javascript" src="jquery.flot.navigate.js"></script>
       <script type="text/javascript" src="jquery.js"></script>




    <script language="javascript" type="text/javascript">  

     $(function () {
    var dat = [ [123456789, 20.9],[1234654321, 22.1] ];
    var options = {
      xaxis: { mode: "
    time ", timeformat: " % h: % M % d. % m. % y ", labelWidth: "
    10 " },
      series: {
      lines: { show: true, fill: true, fillColor: "
    rgba(0, 0, 0, 0.2)" },
      points: { show: true, fill: false },
      shadowSize: 5,
      color: "
    rgba(0, 0, 0, 0.8)"
    },
    grid: { hoverable: true, clickable: true },
    yaxis: { min: 20, max: 20>, tickFormatter: function (v, axis) { return v.toFixed(axis.tickDecimals) +"°C " }},
    selection: { mode: "
    x ", color: "
    rgba(125, 0, 0, 0.6)" },
    legend: { show: true, position: "
    se ", backgroundOpacity: 0.4, backgroundColor: "
    rgb(255, 255, 255)", labelBoxBorderColor: "
    rgb(0, 0, 0)"},
  };
  var plot = $.plot($("#placeholder "),
  [ { data: dat, label: "
    Study Temp ", color:"
    #333"} ], options);
  var overview = $.plot($("#overview"), [{
        data: dat,
        label: "Min: °C, Max: °C",
        color: "#333"
    }], {
        series: {
            color: "rgba(0,0,0,0.8)",
            lines: {
                show: true,
                lineWidth: 1,
                fill: true,
                fillColor: "rgba(0,0,0,0.2)"
            },
            shadowSize: 0
        },
        xaxis: {
            ticks: [],
            mode: "time"
        },
        yaxis: {
            ticks: [],
            min: 0,
            autoscaleMargin: 0.1
        },
        selection: {
            mode: "x",
            color: "rgba(125,0,0,0.6)"
        },
        legend: {
            show: true,
            position: "se",
            backgroundOpacity: 1,
            backgroundColor: "rgb(255,255,255)",
            labelBoxBorderColor: "rgb(0,0,0)"
        }
    });
    $("#placeholder").bind("plotselected", function (event, ranges) {
        plot = $.plot($("#placeholder"), [dat],
        $.extend(true, {}, options, {
            xaxis: {
                min: ranges.xaxis.from,
                max: ranges.xaxis.to
            }
        }));
        overview.setSelection(ranges, true);
    });
    $("#overview").bind("plotselected", function (event, ranges) {
        plot.setSelection(ranges);
    });
    var humanTime;
    var jstime;

    function showTimes(t) {
        var datum = new Date(parseFloat(t));
        humanTime = datum.toUTCString();
    }

    function showTooltip(x, y, contents) {
        $('
' + contents + '

').css({
            position: 'absolute',
            display: 'none',
            top: y + 25,
            left: x + 0,
            border: '2px solid #777',
            padding: '2px',
                'font-family': 'Arial',
                'font-size:': '1.2em',
                'font-weight': 'bold',
                'background-color': '#ddd',
            opacity: 0.80
        }).appendTo("body").fadeIn(200);
    }
    var previousPoint = null;
    $("#placeholder").bind("plothover", function (event, pos, item) {
        $("#x").text(pos.x.toFixed(2));
        $("#y").text(pos.y.toFixed(2));
        if (item) {
            if (previousPoint != item.datapoint) {
                previousPoint = item.datapoint;
                $("#tooltip").remove();
                var x = item.datapoint[0].toFixed(0),
                    y = item.datapoint[1].toFixed(2);
                showTimes(x);
                showTooltip(item.pageX, item.pageY,
                y + "°C (at " + humanTime + "+1000)");
            }
        } else {
            $("#tooltip").remove();
            previousPoint = null;
        }
    });
    });

    </script>  
    </head >

        <body>  

    <div id="placeholder" style="height:400px;width=400px;">  

    </div>  

    <p>Flot Temperature realtime update.</p>  

    </body>  
    </html>

Answer 1

我根据评论在此提出答案。首先修复＆＃34; 20＆gt;＆＃34; yaxis定义中的值，然后确保所有javascript文件与projectFlot.html文件位于同一目录中，然后所有名称都对应。另一件事是你导入jquery.flot.js和jquery.js TWICE！所以删除最后一行<script type="text/javascript" src="jquery.js"></script>甚至第二行<script type="text/javascript" src="jquery.flot.js"></script>。

显示温度的Flot Graph故障

1 个答案: