javascript - 页面错误($.plot 不是函数)

标签 javascript jquery html charts flot

我正在根据从互联网下载的模板开发一个网页。此页面包含多个包含内容,我不知道足以更改。

我的问题是,我正在实现一个Flot图表,并且总是出现错误“Uncaught TypeError: $.plot is not a function”。

我在示例页面上实现了相同的图表,它适用于四个包含:jquery-2.2.3.min.js、/jquery.flot.min.js、jquery.flot.time.js 和 utilitarios .js(我的作者)

我认为问题可能出在模板中的某些包含内容中,并且存在某种类型的冲突。

错误行:

$.plot("#line-chart", [line_data1, line_data2],

我的 Html 源页面:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Painel Predial</title>

  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">

  <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/bootstrap/css/bootstrap.min.css">


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">

  <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/dist/css/AdminLTE.min.css">


  <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/dist/css/skins/_all-skins.min.css">


  <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/iCheck/flat/blue.css">


  <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/morris/morris.css">


  <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-1.2.2.css">


  <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/datepicker/datepicker3.css">


  <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.css">


  <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/iCheck/all.css">


  <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/colorpicker/bootstrap-colorpicker.min.css">


 <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/timepicker/bootstrap-timepicker.min.css">



 <link media="all" type="text/css" rel="stylesheet" href="http://localhost/sistema/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css">


  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

  <header class="main-header">
    <!-- some informations -->
  </header>


  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">

<style>
.esconde{
 display:none;
}

</style>

<!-- Content Header (Page header) -->
<section class="content-header">

  <ol class="breadcrumb">
    <li><a href="http://localhost/sistema/public"><i class="fa fa-dashboard"></i> Home</a></li>
    <li class="active">Dashboard</li>
  </ol>
</section>

<section class="content">
  <!-- Área do form -->
  <form id="formDashboard">
  <div class="row esconde" id="boxForm">
    <div class="col-md-10">
      <div class="box box-primary">
        <div class="box-header with-border">
          <h3 class="box-title">Informe os critérios para geração do gráfico</h3>
        </div>
        <div class="box-body">
          <!--Seleção de unidades -->
          <div class="row">
            <div class="col-xs-4">
              <div class="form-group">
                <label>Informe a macrolocalidade</label>
                <select id="macroLocalidadeSelect" class="form-control">
                  <option value=" ">Selecione...</option>
                </select>
              </div>
            </div>
            <div class="col-xs-4">
              <div class="form-group">
                <label>Informe a localidade</label>
                <select id="localidadeSelect" class="form-control">
                  <option value=" ">Selecione...</option>
                </select>
              </div>
            </div>
            <div class="col-xs-4">
              <div class="form-group">
                <label>Informe a unidade</label>
                <select id="unidadeSelect" class="form-control">
                  <option value=" ">Selecione...</option>
                </select>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-xs-3">
              <div class="form-group">
                <label>Informe o período desejado</label>
                <select id="periodo" class="form-control">
                  <option value="0">Registro Diário</option>
                  <option value="1">Media por Hora</option>
                  <option value="7">7 dias</option>
                  <option value="15">15 dias</option>
                  <option value="30">30 dias</option>
                  <option value="45">45 dias</option>
                  <option value="60">60 dias</option>
                </select>
              </div>
            </div>

            <div class="col-xs-4" id='boxDataDia'>
              <div class="form-group">
                <label>Informe a data que deseja consultar</label>

                <div class="input-group date">
                  <div class="input-group-addon">
                    <i class="fa fa-calendar"></i>
                  </div>
                  <input type="text" class="form-control pull-right" id="diaPesquisa" name="data_hora_inicio">
                </div>
              </div>
            </div>
            <!--
            <div class="col-xs-5">
             <div class="form-group">
              <label>Date:</label>
              <div class="input-group date">
                <div class="input-group-addon">
                  <i class="fa fa-calendar"></i>
                </div>
                <input type="text" class="form-control pull-right" id="datepicker2" name="data_hora_fim">
              </div>
            </div>
          </div> -->

        </div>
      </div>
      <div class="box-footer">
        <input type="hidden" value="5a5D0Rl5Vl57U4pesspDGe0lIhzTsXwNflDzidMb" name="_token">        
        <input type="button" onclick='processar()' class="btn btn-primary active" value="Gerar Relatório" />
        <input type="reset" class="btn btn-default" value="Limpar" />         
      </div>
    </div>
  </div>
</div>
</form>

<!-- Área do Gráfico -->
<div class="row">
<div class="col-md-8">
    <!-- Área de mensagem de erro -->
    <div class="box box-danger box-solid esconde" id="boxError">
     <div class="box-header with-border">
      <h3 class="box-title">Erro</h3>

      <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
      </div>
      <!-- /.box-tools -->
    </div>
    <!-- /.box-header -->
    <div class="box-body" id="boxErrorMessage">

    </div>
    <!-- /.box-body -->
  </div>
  <!-- /.box -->



  <!--Área de mensagem -->
  <div class="box box-primary box-solid esconde" id="boxAguarde">
    <div class="box-header">
      <h3 class="box-title">Carregando....</h3>
    </div>
    <div class="box-body">
      Aguarde enquanto o gráfico é gerado
    </div>
    <!-- /.box-body -->
    <!-- Loading (remove the following to stop the loading)-->
    <div class="overlay">
      <i class="fa fa-refresh fa-spin"></i>
    </div>
    <!-- end loading -->
  </div>
</div>
</div>
<div class="row">
  <div class="col-md-2 text-center esconde" id="boxPainelSituacaoAtualHidrico">

      <div class="box box-primary esconde" id="boxGraficoAtualHidricoSensor1">
        <input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobHidricoSensor1" data-readOnly="true">
        <div class="knob-label" id="labelSituacaoAtualHidricoSensor1"></div>
        <div class="box box-primary bg-aqua-active color-palette">
            <div id="mediaRegistradaHidricoSensor1"></div>
        </div>
      </div>


      <div class="box box-primary esconde" id="boxGraficoAtualHidricoSensor2">      
        <input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobHidricoSensor2" data-readOnly="true">
        <div class="knob-label" id="labelSituacaoAtualHidricoaSensor2"></div>
        <div class="box box-primary bg-aqua-active color-palette">
            <div id="mediaRegistradaHidricoSensor2"></div>
        </div>
      </div>


    </div>


  <div class="col-md-8">
  <!-- AREA CHART -->
  <div class="box box-primary esconde" id="boxGraficoHidrico">
    <div class="box-header with-border">
    <i class="fa fa-bar-chart-o"></i>
      <h3 class="box-title">Histórico de Nivel de Reservatórios</h3>

      <div class="box-tools pull-right">
        <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
        </button>
        <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
      </div>
    </div>
    <div class="box-body">
      <div class="chart" id="areaChartContainer">
        <canvas id="areaChart" style="height:310px"></canvas>
      </div>
    </div>
    <!-- /.box-body -->
  </div>


</div>
</div>

<!-- Gráficos de temperatura -->
<div class="row">

 <div class="col-md-2 text-center" id="boxPainelSituacaoAtualTemperatura">

      <div class="box box-danger esconde" id="boxGraficoAtualTemperaturaSensor1">
        <input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobTemperaturaSensor1" data-readOnly="true">
        <div class="knob-label" id="labelSituacaoAtualTemperaturaSensor1"></div>
        <div class="box box-danger bg-red color-palette">
            <div id="mediaRegistradaTemperaturaSensor1"></div>
        </div>
      </div>


      <div class="box box-danger esconde" id="boxGraficoAtualTemperaturaSensor2">      
        <input type="text" class="knob" value="30" data-width="90" data-height="90" id="inputKnobTemperaturaSensor2" data-readOnly="true">
        <div class="knob-label" id="labelSituacaoAtualTemperaturaSensor2"></div>
        <div class="box box-danger bg-red color-palette">
            <div id="mediaRegistradaTemperaturaSensor2"></div>
        </div>
      </div>


    </div>

<div class="col-md-8">

   <!-- FLOT CHART -->
  <div class="box box-danger esconde" id="boxGraficoTemperatura">
     <div class="box-header with-border">
        <i class="fa fa-bar-chart-o"></i>
            <h3 class="box-title">Histórico de Temperatura das Bombas</h3>
            <div class="box-tools pull-right">
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                </button>
                <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
            </div>
        </div>
        <div class="box-body">
            <div id="line-chart" style="height: 300px;"></div>
        </div>
        <!-- /.box-body-->
    </div>
</div>
</div>
<div id="saida"></div>
</section>



<!-- jQuery 2.2.3 -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>

<!-- ChartJS 1.0.1 Hídrico-->
<script src="http://localhost/sistema/public/plugins/chartjs/Chart.min.js"></script>

<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>

<!-- Flot graph (Temperatura) -->
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.min.js"></script>
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.time.js"></script>


<!-- Utilitários -->
<script src="http://localhost/sistema/public/js/utilitarios.js"></script>
<script src="http://localhost/sistema/public/js/graph/graficos.js"></script>

<script>
/**
Load da Página
*/
$(function () {
    $('#diaPesquisa').datepicker({ 
        dateFormat: "dd/mm/yyyy" ,
        language: "pt-BR",
        autoclose:true
    });


 $.get('/sistema/public/dashload', function(dataLoad){
   var hasError = showLoadError(dataLoad);
   if(!hasError)
    showFormOptions(dataLoad);
});
});
</script>

<!-- page script -->



  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Versão</b> 1.0.4
    </div>
    <strong>Copyright &copy; 2017 <a href="http://www.sensoragroup.com.br" target='_blank'>Sensora Group</a>.</strong> Todos os direitos reservados
  </footer>

  <!-- Control Sidebar -->
  <aside class="control-sidebar control-sidebar-dark">
    <!-- Create the tabs -->
    <ul class="nav nav-tabs nav-justified control-sidebar-tabs">
      <li><a href="#control-sidebar-home-tab" data-toggle="tab"><i class="fa fa-home"></i></a></li>
      <li><a href="#control-sidebar-settings-tab" data-toggle="tab"><i class="fa fa-gears"></i></a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
      <!-- Home tab content -->
      <div class="tab-pane" id="control-sidebar-home-tab">
        <h3 class="control-sidebar-heading">Recent Activity</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-birthday-cake bg-red"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Langdon's Birthday</h4>

                <p>Will be 23 on April 24th</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-user bg-yellow"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Frodo Updated His Profile</h4>

                <p>New phone +1(800)555-1234</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-envelope-o bg-light-blue"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Nora Joined Mailing List</h4>

                <p>nora@example.com</p>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <i class="menu-icon fa fa-file-code-o bg-green"></i>

              <div class="menu-info">
                <h4 class="control-sidebar-subheading">Cron Job 254 Executed</h4>

                <p>Execution time 5 seconds</p>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

        <h3 class="control-sidebar-heading">Tasks Progress</h3>
        <ul class="control-sidebar-menu">
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Custom Template Design
                <span class="label label-danger pull-right">70%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-danger" style="width: 70%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Update Resume
                <span class="label label-success pull-right">95%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-success" style="width: 95%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Laravel Integration
                <span class="label label-warning pull-right">50%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-warning" style="width: 50%"></div>
              </div>
            </a>
          </li>
          <li>
            <a href="javascript:void(0)">
              <h4 class="control-sidebar-subheading">
                Back End Framework
                <span class="label label-primary pull-right">68%</span>
              </h4>

              <div class="progress progress-xxs">
                <div class="progress-bar progress-bar-primary" style="width: 68%"></div>
              </div>
            </a>
          </li>
        </ul>
        <!-- /.control-sidebar-menu -->

      </div>
      <!-- /.tab-pane -->
      <!-- Stats tab content -->
      <div class="tab-pane" id="control-sidebar-stats-tab">Stats Tab Content</div>
      <!-- /.tab-pane -->
      <!-- Settings tab content -->
      <div class="tab-pane" id="control-sidebar-settings-tab">
        <form method="post">
          <h3 class="control-sidebar-heading">General Settings</h3>

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Report panel usage
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Some information about this general settings option
            </p>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Allow mail redirect
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Other sets of options are available
            </p>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Expose author name in posts
              <input type="checkbox" class="pull-right" checked>
            </label>

            <p>
              Allow the user to show his name in blog posts
            </p>
          </div>
          <!-- /.form-group -->

          <h3 class="control-sidebar-heading">Chat Settings</h3>

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Show me as online
              <input type="checkbox" class="pull-right" checked>
            </label>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Turn off notifications
              <input type="checkbox" class="pull-right">
            </label>
          </div>
          <!-- /.form-group -->

          <div class="form-group">
            <label class="control-sidebar-subheading">
              Delete chat history
              <a href="javascript:void(0)" class="text-red pull-right"><i class="fa fa-trash-o"></i></a>
            </label>
          </div>
          <!-- /.form-group -->
        </form>
      </div>
      <!-- /.tab-pane -->
    </div>
  </aside>
  <!-- /.control-sidebar -->
  <!-- Add the sidebar's background. This div must be placed
       immediately after the control sidebar -->
  <div class="control-sidebar-bg"></div>
</div>




<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://localhost/sistema/public/js/dropdown.js"></script>


<!-- jQuery 2.2.3 
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>

<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
<script>
  $.widget.bridge('uibutton', $.ui.button);
</script>
<!-- Bootstrap 3.3.6 
<script src="bootstrap/js/bootstrap.min.js"></script> -->
<script src="http://localhost/sistema/public/bootstrap/js/bootstrap.min.js"></script>


<!-- Morris.js charts -->
<!-- <script src="plugins/morris/morris.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/morris/morris.min.js"></script>


<!-- Sparkline 
<script src="plugins/sparkline/jquery.sparkline.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/sparkline/jquery.sparkline.min.js"></script>

<!-- jvectormap 
<script src="plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>-->
<script src="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>

<!-- <script src="plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>

<!-- jQuery Knob Chart 
<script src="plugins/knob/jquery.knob.js"></script> -->
<script src="http://localhost/sistema/public/plugins/knob/jquery.knob.js"></script>

<!-- daterangepicker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<!-- <script src="plugins/daterangepicker/daterangepicker.js"></script> -->
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>

<!-- datepicker 
<script src="plugins/datepicker/bootstrap-datepicker.js"></script> -->
<script src="http://localhost/sistema/public/plugins/datepicker/bootstrap-datepicker.js"></script>

<!-- bootstrap datepicker -->

<!-- Bootstrap WYSIHTML5 
<script src="plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>


<!-- Slimscroll 
<script src="plugins/slimScroll/jquery.slimscroll.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/slimScroll/jquery.slimscroll.min.js"></script>


<!-- FastClick 
<script src="plugins/fastclick/fastclick.js"></script> -->
<script src="http://localhost/sistema/public/plugins/fastclick/fastclick.js"></script>


<!-- AdminLTE App 
<script src="dist/js/app.min.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/app.min.js"></script>

<!-- AdminLTE dashboard demo (This is only for demo purposes) 
<script src="dist/js/pages/dashboard.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/pages/dashboard.js"></script>

<!-- AdminLTE for demo purposes 
<script src="dist/js/demo.js"></script> -->
<script src="http://localhost/sistema/public/dist/js/demo.js"></script>



<!-- <script src="http://localhost/sistema/public/js/app.js"></script>
 -->


<script>
  $(function () {
    //Initialize Select2 Elements
    $(".select2").select2();

    //Datemask dd/mm/yyyy
    $("#datemask").inputmask("dd/mm/yyyy", {"placeholder": "dd/mm/yyyy"});
    //Datemask2 mm/dd/yyyy
    $("#datemask2").inputmask("mm/dd/yyyy", {"placeholder": "mm/dd/yyyy"});
    //Money Euro
    $("[data-mask]").inputmask();

    //Date range picker
    $('#reservation').daterangepicker();
    //Date range picker with time picker
    $('#reservationtime').daterangepicker({timePicker: true, timePickerIncrement: 30, format: 'MM/DD/YYYY h:mm A'});
    //Date range as a button
    $('#daterange-btn').daterangepicker(
        {
          ranges: {
            'Today': [moment(), moment()],
            'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
            'Last 7 Days': [moment().subtract(6, 'days'), moment()],
            'Last 30 Days': [moment().subtract(29, 'days'), moment()],
            'This Month': [moment().startOf('month'), moment().endOf('month')],
            'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
          },
          startDate: moment().subtract(29, 'days'),
          endDate: moment()
        },
        function (start, end) {
          $('#daterange-btn span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
        }
    );

    //Date picker
    $('#datepicker').datepicker({
      autoclose: true
    });

    //iCheck for checkbox and radio inputs
    $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({
      checkboxClass: 'icheckbox_minimal-blue',
      radioClass: 'iradio_minimal-blue'
    });
    //Red color scheme for iCheck
    $('input[type="checkbox"].minimal-red, input[type="radio"].minimal-red').iCheck({
      checkboxClass: 'icheckbox_minimal-red',
      radioClass: 'iradio_minimal-red'
    });
    //Flat red color scheme for iCheck
    $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
      checkboxClass: 'icheckbox_flat-green',
      radioClass: 'iradio_flat-green'
    });

    //Colorpicker
    $(".my-colorpicker1").colorpicker();
    //color picker with addon
    $(".my-colorpicker2").colorpicker();

    //Timepicker
    $(".timepicker").timepicker({
      showInputs: false
    });
  });
</script>




</body>




</html>

最佳答案

在 HTML 输出中,您在该页面上获得了 3 次 jQuery 来源。第一次采购就在您采购 Flot 之前。

<!-- jQuery 2.2.3 -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>

<!-- ChartJS 1.0.1 Hídrico-->
<script src="http://localhost/sistema/public/plugins/chartjs/Chart.min.js"></script>

<!-- date-range-picker -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.11.2/moment.min.js"></script>
<script src="http://localhost/sistema/public/plugins/daterangepicker/daterangepicker.js"></script>

<!-- Flot graph (Temperatura) -->
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.min.js"></script>
<script src="http://localhost/sistema/public/plugins/flot/jquery.flot.time.js"></script>

然后在页面下方,您可以在此处再次获取它:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="http://localhost/sistema/public/js/dropdown.js"></script>

然后几乎在您再次执行此操作后立即:

<!-- jQuery 2.2.3 
<script src="plugins/jQuery/jquery-2.2.3.min.js"></script> -->
<script src="http://localhost/sistema/public/plugins/jQuery/jquery-2.2.3.min.js"></script>

除了多次加载 jQuery 之外,您看到的问题是首先加载 jQuery,然后您获取绑定(bind)到该 jQuery 实例的 Flot。一旦 jQuery 的下一个源实例发生,这种关联就会消失。

花点时间确保您在源代码开始时就源代码了 jQuery,然后源代码依赖于 jQuery 的所有内容。

关于javascript - 页面错误($.plot 不是函数),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42916830/

相关文章:

javascript - 应用 jqgrid 搜索过滤器工具栏

html - flexbox 模型中的自动内边距

javascript - 在 SilverStripe 2.4.7 中使用 Javascript

jquery 中的 javascript 切换未按预期工作

javascript - Controller 的 minifed 版本出错 - angularjs?

javascript - 如何使用 jQuery 通过 ID 选择元素

javascript - 为什么 jQuery 中的 AJAX 没有从 PHP 接收 JSON 字符串?

html - CSS:即使鼠标抬起后悬停也不会退出

php - 如何按照我选择的顺序在文本框中获取多个选择框值

javascript - 错误处理响应 : TypeError: a. 替换不是函数 'With a catch'