Question

我正在尝试使用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即使我在JSON调用之后编写“console.log（data）”，脚本仍然无法正常工作，并且屏幕上不会显示任何消息。使用Chrome实用程序（我不记得名称;-)）我可以看到hte文件1.json已正确加载。我认为问题在于首先执行脚本，然后加载文件1.json。我在页面上做了一些编辑。你可以看到a demo on this page 这是页面“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官方exaples以确保格式正确）

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

现在我要睡觉但是明天我们应该尝试将标签添加到情节中并尝试使用多个系列值。

Answer 1

我用它来生成自动更新的信息网站，以便进行项目进展。

我的小例子使用了多种类型的图表：line和bar。

如果我有一个正在运行的示例，我发现它更容易理解，所以我们在这里：

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

Answer 2

试试这个：

$(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]
        ]
}

用jQuery Flot绘制的外部数据

2 个答案: