0

我正在尝试使用 HTML 和 Javascript 创建折线图。我正在使用 Stephen A. Thomas 的《Data Visualization with Javascript 》一书作为指南。我正在使用 Komodo Edit 来编写我的代码。我的代码如下：

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Military Opinion Practice</title>
</head>
<body>
    <div id="chart" style="width:600px; height:300px;"></div>
    <script type="text/javascript">
        var milOp = [
            [1975, 58],
            [1997, 57],
            [1979, 54],
            [1982, 50],
            [1983, 53],
            [1984, 58],
            [1985, 61],
            [1986, 63],
            [1987, 61],
            [1988, 63],
            [1989, 58],
            [1990, 68],
            [1991, 77],
            [1993, 67],
            [1994, 64],
            [1995, 64],
            [1996, 66],
            [1997, 60],
            [1998, 64],
            [1999, 68],
            [2000, 64],
            [2001, 66],
            [2002, 84],
            [2003, 83],
            [2004, 75],
            [2005, 74],
            [2006, 73],
            [2007, 69],
            [2008, 71],
            [2009, 82],
            [2010, 76],
            [2011, 78],
            [2012, 75],
            [2013, 76],
            [2014, 74],
            [2015, 72],
            [2016, 73]    
        ]
    //FUNCTION TO CALL GRAPH 
    window.onload = function callGraph() {
        Flotr.draw(
            document.getElementById("chart"),
            [{data: milOp, lines: {show:true} }]
        );
    }
    //TOP LEVEL CODE 
    callGraph()
    </script>


</body>
</html>

谁能帮我理解我的错误在哪里。自从我学习 JavaScript 课程以来已经有几年了，我可能把我的代码顺序弄错了，或者忘记了一个基本步骤。任何指导将不胜感激。

谢谢！

4

2 回答 2

0

你能用控制台输出更新你的问题吗？我不确定 Flotr 是什么，并且您的代码中没有任何地方包含一个可以解决此问题的库。

我还建议执行以下操作：

    function callGraph() {
    Flotr.draw(
        document.getElementById("chart"),
        [{data: milOp, lines: {show:true} }]
    );
}
window.onload = callGraph();  // note this line
于 2017-03-11T20:38:10.217 回答
0

您忘记包含库。我刚刚在我的机器上尝试了以下操作，并且在包含脚本后它可以工作。 

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Military Opinion Practice</title>
          <script type="text/javascript" src="../flotr2.min.js"></script>

</head>
<body>
    <div id="chart" style="width:600px; height:300px;"></div>
    <script type="text/javascript">
        var milOp = [
            [1975, 58],
            [1997, 57],
            [1979, 54],
            [1982, 50],
            [1983, 53],
            [1984, 58],
            [1985, 61],
            [1986, 63],
            [1987, 61],
            [1988, 63],
            [1989, 58],
            [1990, 68],
            [1991, 77],
            [1993, 67],
            [1994, 64],
            [1995, 64],
            [1996, 66],
            [1997, 60],
            [1998, 64],
            [1999, 68],
            [2000, 64],
            [2001, 66],
            [2002, 84],
            [2003, 83],
            [2004, 75],
            [2005, 74],
            [2006, 73],
            [2007, 69],
            [2008, 71],
            [2009, 82],
            [2010, 76],
            [2011, 78],
            [2012, 75],
            [2013, 76],
            [2014, 74],
            [2015, 72],
            [2016, 73]    
        ]
    //FUNCTION TO CALL GRAPH 
    window.onload = function callGraph() {
        Flotr.draw(
            document.getElementById("chart"),
            [{data: milOp, lines: {show:true} }]
        );
    }
    //TOP LEVEL CODE 
    callGraph()
    </script>


</body>
</html>

确保脚本 src 路径正确。

在此处输入图像描述

于 2017-03-11T20:46:10.430 回答