Проблема с графиком отображения температуры

0

Я делаю проект температуры, необходимый для использования флота для отображения данных. И я обнаружил, что парень делает почти тот же проект, что и я. Вот ссылка: температура jquery 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>
  • 0
    Я просто комментирую, это не настоящий ответ. Просто чтобы быть уверенным, вы видели, что значение "max" имеет символ ">" в конце ( max: 20> в определении yaxis )? Это проблема копирования / вставки?
  • 0
    [18: 20: 21.601] Ошибка типа: $ .plot не является функцией @ file: ///User/renren/flot/projectFlot.html: 46
Показать ещё 2 комментария
Теги:
flot

1 ответ

0
Лучший ответ

Я сформулирую свой ответ здесь, основываясь на комментариях. Прежде всего, исправьте значение "20" в определении yaxis, затем убедитесь, что все файлы javascript находятся в той же директории, что и файл projectFlot.html, а затем соответствуют всем именам. Другое дело, что вы импортируете jquery.flot.js и jquery.js ДВАЖДЫ! поэтому удалите последнюю строку <script type="text/javascript" src="jquery.js"></script> и даже второй <script type="text/javascript" src="jquery.flot.js"></script>.

Поделиться
  • 0
    Благодарю. Это исправляет. большое спасибо
  • 0
    Я пытаюсь получить данные моей базы данных, я должен включить еще один insert.php в мой projectFlot.html. Я?
Показать ещё 2 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню