Question

我正在尝试使用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课程已经有几年了，而且我的代码顺序错了或忘记了一个基本步骤。任何指导都将非常感谢。

谢谢！

Answer 1

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

我还建议你做以下事情：

beforeDelete

Answer 2

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

<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路径正确。

图表不会使用HTML显示在chrome中

2 个答案: