Zewnętrzne dane do wydrukowania za pomocą jQuery Flot

Próbuję użyć wtyczki flot do wykreślenia niektórych danych zapisanych w pliku JSON. Nie wydaje się to takie trudne, ale nie mogę znaleźć czegoś, co działa ... czy możesz mi pomóc.Zewnętrzne dane do wydrukowania za pomocą jQuery Flot

To jest strona Mam napisał:

$(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); 
});

gdy plik 1.json coitain wszystkie z poniższych kryteriów:

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

@MarcoJohannesen Nawet jeśli piszę „konsoli. log (dane) "po wywołaniu JSON skrypt nadal nie działa i na ekranie nie pojawia się żaden komunikat. Korzystanie z narzędzia Chrome (nie pamiętam nazwy ;-)) Widzę, że plik 1.json został poprawnie załadowany. Myślę, że problem polega na tym, że najpierw uruchamiany jest skrypt, a następnie ładowany jest plik 1.json. Dokonałem niewielkiej edycji na stronie. Widać a demo on this page To jest strona "1.htm" Kod:

<!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>

i to jest 1.json (Dodałem nawiasy kwadratowe)

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

Z pewnością znalazłem sposób na stworzenie działającej strony. To kod użyłem:

<!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>

i to plik json (zaczerpnięte z Flot oficjalnych przykładów, które by mieć pewność, że jest prawidłowo sformatowany)

{ 
    "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]] 
}

teraz idę spać, ale jutro powinniśmy spróbować dodać etykietę do fabuły i próbować z więcej niż jedną serią wartości.

Źródło

2011-10-22 Nicolaesse

można spróbować sprawdzając co się $ .plot dostaje się do zmiennej danych? –

@ Marco, jak mogę to sprawdzić? – Nicolaesse

Jakiej przeglądarki używasz? Jeśli używasz IE Developer lub Firefox Firebug lub Chrome Firebug Lite, możesz zrobić console.log (dane); po wywołaniu getJSON :) –

Używam tego do generowania strony z automatyczną aktualizacją informacji na temat postępów projektu

Mój mały przykład z użyciem więcej niż jednego rodzaju diagramu: linia i pasek

I łatwiej zrozumieć, jeśli mam uruchomioną przykład, więc tu jesteśmy:

<!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>

a dane (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] ] 
}

Źródło

2012-09-18 14:34:25

Spróbuj tego:

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

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

A w pliku JSON jest błąd składni (rozpoczynające się od "[" a kończąc na "}" można spróbować to:.

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

Źródło

2011-11-07 19:36:43

do nie działa ... Zaktualizowałem pliki on-line, abyś mógł spróbować, jeśli masz debugger. Znalazłem coś, co może być interesujące, ale mogę w pełni zrozumieć skrypt http://people.iola.dk/olau/flot/examples/ajax.html i http://burnsforce.com/flot-format-data- flot-readable-json/ – Nicolaesse

Zrobiłem działającą wersję ... sprawdź wpis powyżej – Nicolaesse

$ .plot (plotarea, json); –

Zewnętrzne dane do wydrukowania za pomocą jQuery Flot

Odpowiedz

Powiązane problemy