Question

我试图使用jQuery显示一个简单的jqPlot两线图表，该图表会生成图表并在单击特定按钮时显示显示区域。我可以在同一目录中同一服务器上的单独程序中的单独程序中运行该代码，但是当我将其插入我的代码时，它拒绝呈现。

我已经按顺序检查了js文件是否全部存在，并且名称正确。在“查看源代码”中，我可以单击每个图标，然后很好地查看它们，以便找到它们。在jQuery中，我可以很好地显示文本和显示/隐藏，所以我的显示该部分的IF逻辑与按钮单击功能一样有效。我已经经历了与该问题类似的Stack Overflow响应，但是似乎没有合适的解决方案。我没有仔细检查过jqPlot的文档说明。我相信是我的jQuery的新手能力使我退缩。

我需要对某些内容敏感，但这是程序的顶部：

<!DOCTYPE html>
<html lang="en" class=" ">
<head>  
    <title>company product name</title>
    <meta charset="utf-8" />
    <meta name="description" content="blah blah blah" />
    <meta name="keywords" content="some, keywords"/>
    <meta name="author" content="some guy" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 

    <!-- original items for jQuery work -->
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jobdisplay/myother.js"></script>
    <script type="text/javascript" src="js/jobdisplay/jquery.table2excel.js"></script>
    <link rel="stylesheet" href="css/style2.css" type="text/css" />

    <!-- jqPlot for line charts -->
    <script type="text/javascript" src="js/jqPlot/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="js/jqPlot/plugins/jqplot.categoryAxisRenderer.js"></script>
    <script type="text/javascript" src="js/jqPlot/plugins/jqplot.pointLabels.js"></script>
    <link   type="text/css" rel="stylesheet" href="js/jqPlot/jquery.jqplot.css" />

    <!-- Bootstrap and other items - original items -->
    <link rel="stylesheet" href="css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="css/animate.css" type="text/css" />
    <link rel="stylesheet" href="css/font-awesome.min.css" type="text/css" />
    <link rel="stylesheet" href="css/icon.css" type="text/css" />
    <link rel="stylesheet" href="css/font.css" type="text/css" />
    <link rel="stylesheet" href="css/app.css" type="text/css" />  
    <link rel="stylesheet" href="css/landing.css" type="text/css" />

  <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
    <script type="text/javascript">
        window.onload=loadRolesTitleSelection();
    </script>
</head>

这是图表要显示的部分-chart1 div仅用于此测试，试图显示一些内容：

    <section id="trendData" class="panel panel-default" style="display: none; width: 60%; min-width:600px; margin-left: 30px;">
        <header class="panel-heading bg-light">
            <ul class="nav nav-tabs nav-justified">
                <li class="active"><a href="#rates" data-toggle="tab">Rates</a></li>
                <li><a href="#duration" data-toggle="tab">Open Duration</a></li>
                <li><a href="#jobs" data-toggle="tab">Number of Jobs</a></li>
            </ul>
        </header>
        <div class="panel-body">
            <div class="tab-content">
                <div class="tab-pane active" id="rates" name="rates" style="height:400px;width:300px;">
                    <p>If only my dog could see me now.</p>
<!-- Plot -->
<div id="chart1"></div>
                </div>
                <div class="tab-pane" id="duration" style="height:400px;width:300px;">
                </div>
                <div class="tab-pane" id="jobs" style="height:400px;width:300px;"> 
                </div>
            </div>
        </div>
        <div id="trendsResults" class="trendsResults"></div>
    </section>

奇怪的是，在下面，我发现了这一点，这是由早期的程序员所做的。顺便说一句，一切正常，直到我开始加载以下jqPlot代码为止：

    <script src="js/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="js/bootstrap.js"></script>
    <!-- App -->
    <script src="js/app.js"></script>  
    <script src="js/slimscroll/jquery.slimscroll.min.js"></script>
    <script src="js/charts/easypiechart/jquery.easy-pie-chart.js"></script>
    <script src="js/app.plugin.js"></script>
</body>
</html>

当单击按钮时，这是其运行的简化测试版本：

$('#btnTrend').click( function() {
    $('#trendData').show();
    $.jqplot('chart1',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]],
                [[1, 12],[3,15.12],[5,113.1],[7,133.6],[9,185.9],[11,319.9]]]);
});

但什么也没出现。

同样，一个简单的版本也很好。白：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jqPlot/jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="js/jqPlot/jquery.jqplot.css" />
<div id="chart1"></div>
<script type="text/javascript">
    $(document).ready(function () {
        $.jqplot('chart1',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]],
                [[1, 12],[3,15.12],[5,113.1],[7,133.6],[9,185.9],[11,319.9]]]);
    });
</script>

我希望能够单击btnTrend并使其在指定的位置生成图表。最终，我将对图表进行修饰，并从API中提取代码并在jSON中进行处理，但现在我需要知道图表将在继续之前生成。

Answer 1

大部分回答了问题。

禁用多余的行

<script src="js/jquery.min.js"></script>

以及不需要的行

<script src="js/charts/easypiechart/jquery.easy-pie-chart.js"></script>

，现在显示图表。有时间的时候，我会回过头来找出哪个是冒犯性的聚会，但是我必须完成这个项目，所以我很高兴继续前进。

Answer 2

我有机会进行隔离测试，并且肯定是重复的jquery.min.js文件加载引起了冲突。一旦我删除了下面的行（注释掉了），jqPlot就可以正常工作了。

<script src="js/jquery.min.js"></script>

jqPlot在程序中不显示折线图，但在独立代码中可以显示

2 个答案: