Внешние данные для построения с помощью jQuery Flot - PullRequest
Новая
       29

Внешние данные для построения с помощью jQuery Flot

5 голосов
/ 22 октября 2011

Я пытаюсь использовать плагин flot для отображения некоторых данных, которые записываются в файл JSON. Это не так сложно сделать, но я не могу найти что-то, что сработает ... не могли бы вы мне помочь.

Это страница, которую я написал: 

$(function () {  
    var data;
    $.getJSON("1.json", function(json) {
        var data = json;
    });

    var options = {  
            legend: {  
                show: true,  
                margin: 10,  
                backgroundOpacity: 0.5  
            },  
            points: {  
                show: true,  
                radius: 3  
            },  
            lines: {  
                show: true  
            }
    };

    var plotarea = $("#placeholder");  

    $.plot(plotarea , data, options);  
});

в то время как файл 1.json содержит все следующее: 

{  label: "Values",  
    data:   [   
        [1, 50.026],
        [2, 50.028],
        [3, 50.029],
        [4, 50.026],
        [5, 50.025],
        [6, 50.016]
        ]
}

@ MarcoJohannesen Даже если я напишу «console.log (data)» после вызова JSON, скрипт все равно не работает, и на экране не появляется никаких сообщений. Используя утилиту Chrome (я не помню названия ;-)), я вижу, что файл 1.json загружен правильно. Я думаю, что проблема в том, что в первую очередь выполняется скрипт и после этого загружается файл 1.json. Я сделал небольшое редактирование на странице. Вы можете увидеть демо на этой странице Это код страницы "1.htm": 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
 </head>
    <body>
    <h1>Graph</h1>

    <div id="placeholder" style="width:600px;height:300px;"></div>
<script language="javascript" type="text/javascript">  
$(function () {  
    var data;
    $.getJSON("1.json", function(json) {
        var data = json;
    });
    console.log(data);

    var plotarea = $("#placeholder");  

    $.plot(plotarea , data);  
});
</script>   
</body>
</html>

а это 1.json (я добавил квадратные скобки) 

[{  label: "Values",  
    data:   [   
        [1, 50.026],
        [2, 50.028],
        [3, 50.029],
        [4, 50.026],
        [5, 50.025],
        [6, 50.016]
        ]
}}

Я определенно нашел способ сделать рабочую страницу. Вот код, который я использовал: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
 </head>
    <body>
    <h1>Graph</h1>
<script language="javascript" type="text/javascript">  
$(document).ready(function(){
    $.getJSON("1.json", function(json) {
       //succes - data loaded, now use plot:
       var plotarea = $("#placeholder");
       var data=[json.data];
       $.plot(plotarea , data);  
    });
});

</script>       
    <div id="placeholder" style="width:600px;height:300px;"></div>

</body>
</html>

и это файл json (взят из официальных примеров flot, чтобы убедиться, что он правильно отформатирован) 

{
    "label": "Europe (EU27)",
    "data": [[1999, 1], [2000, 0.23], [2001, 3], [2002, 4], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]]
}

сейчас я ложусь спать, но завтра я должен попытаться добавить метку к графику и попробовать использовать более одной серии значений.

Ответы [ 2 ]

6 голосов
/ 18 сентября 2012

Я использую это для создания автоматически обновляемого информационного веб-сайта о ходе проекта.

Мой маленький пример, использующий более одного типа диаграмм: линии и столбцы.

Мне легче понять, если у меня есть работающий пример, так что вот мы: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
 </head>
<body>
<h1>Graph</h1>
<script language="javascript" type="text/javascript">  
$(document).ready(function(){
    $.getJSON("barLine.json", function(json) {
       //succes - data loaded, now use plot:
           var plotarea = $("#placeholder");
           var dataBar=json.dataBar;
            var dataLine=json.dataLine;
            $.plot(plotarea , [
                {
                    data: dataBar,
                    bars: {show: true}
                },
                {
                    data: dataLine,
                    lines: { show: true, steps: false }
                }               
            ]
        );
    });
});

</script>       
    <div id="placeholder" style="width:600px;height:300px;"></div>
</body>
</html>

И данные (barLine.json): 

{
"label": "Europe (EU27)",
"dataBar": [[1999, 1], [2000, 0.23], [2001, 3], [2002, 4], [2003, 1.3], [2004, 2.5], [2005, 2.0], [2006, 3.1], [2007, 2.9], [2008, 0.9]],
"dataLine": [[1999, 2], [2000, 3.23], [2001, 1], [2002, 5], [2003, 2.3], [2004, 6.5], [2005, 4.0], [2006, 3.1], [2007, 0.9], [2008, 6.9], [2009, 9.9] ]
}
2 голосов
/ 07 ноября 2011

Попробуйте это: 

$(function () {  
    var data;
    var plotarea = $("#placeholder");

    $.getJSON("1.json", function(json) {
       //succes - data loaded, now use plot:
       $.plot(plotarea , data);  
    });
});

И в вашем файле JSON есть синтаксическая ошибка (начиная с «[» и заканчивая «}». Не могли бы вы попробовать это: 

{  label: "Values",  
    data:   [   
        [1, 50.026],
        [2, 50.028],
        [3, 50.029],
        [4, 50.026],
        [5, 50.025],
        [6, 50.016]
        ]
}
...