jqPlot не отображает линейную диаграмму в программе, но в автономном режиме - PullRequest
Новая
       15

jqPlot не отображает линейную диаграмму в программе, но в автономном режиме

0 голосов
/ 20 января 2019

Я пытаюсь отобразить простой двухстрочный график jqPlot, используя jQuery, который генерирует график и показывает область отображения при нажатии определенной кнопки.Я могу нормально запустить код в отдельной программе на том же сервере из того же каталога, но когда я вставляю его в свой код, он отказывается от рендеринга.

Я проверил, что все файлы js находятся там, в порядке, и имена правильные.В View Source я могу щелкнуть по каждому из них и просмотреть их очень хорошо, чтобы они были найдены.В 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>

Вотчасть, где должны появляться диаграммы - div 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, но сейчас мне нужно знать, что диаграмма будет сгенерирована, прежде чем я продолжу.

Ответы [ 2 ]

0 голосов
/ 21 января 2019

У меня был шанс протестировать с изоляцией, и именно конфликт файлов вызвал именно дубликат загрузки файла jquery.min.js.Как только я удалил строку ниже (закомментировал), jqPlot работал отлично. 

<script src="js/jquery.min.js"></script>
0 голосов
/ 20 января 2019

Вопрос ответил, в основном.

Отключена дополнительная строка 

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

, а также ненужная строка 

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

, и теперь отображается график.Когда у меня будет время, я вернусь и выясню, кто был обидчиком, но я должен закончить этот проект, поэтому я рад идти дальше.

...