Chart.js 图表在表单提交时出现和消失

Question

我在 stackoverflow 中搜索了一个答案，但没有得到答案，所以我想我会问其他人是否有问题。

我的图表基于一个示例 https://travishorn.com/stacked-bar-chart-with-chart-js-846ebdf11c4e

唯一的变化是我从 ajax 调用中获取数据，而不仅仅是静态数据

html/php:

 function addHeader() {
  echo <<< SUBHEADER
  <script type="text/javascript" src="scripts/Chart.min.js"></script>

SUBHEADER;
}
$d1 = isset($_GET['d1']) ? $_GET['d1'] : date("m/d/Y"); // default to today
$db = isset($_GET['db']) ? $_GET['db'] : 1; //Default to Cloud 1
$cd = isset($_GET['cd']) ? $_GET['cd'] : 1; //Default to two weeks before start
$cc = isset($_GET['campus']) ? $_GET['campus'] : false;

$campus_list = CampusList::GetCampBytype($db);


$cc_class = 'Cloud' . $db;

$stats = $cc_class::getPackagingReport($d1);
$test = Cloud::getStartDates();
?>
<div class="container-fluid">
  <form id="chartdata" method="GET">
  <div class="row">
  <div class="input-group date" data-provide="datepicker" data-date-autoclose="true" style="float:left;width:150px;margin-right: 15px;">
      <input name="d1" type="text" class="form-control" required value="<?php echo $d1; ?>">
      <div class="input-group-addon">
          <span class="glyphicon glyphicon-th"></span>
      </div>
  </div>
  <div class="input-group" style="float:left;margin-right: 15px;">
    <select class="form-control" name="db">
      <option value="1">Cloud 1</option>
      <option value="2">Cloud 2</option>
    </select>
  </div>
  <div class="input-group" style="float:left;margin-right: 15px;">
    <select class="form-control" name="campus">
      <option value="">Choose campus</option>
    <?php foreach ($campus_list as $campus) {
      if ($cc == $campus->campuscode) $selected = "selected";
      else $selected = "";
    ?>
      <option id="cc" value="<?php echo $campus->campuscode; ?>" <?php echo $selected; ?>><?php echo $campus->campusname; ?></option>
    <?php } ?>
    </select>
  </div>
  <input type="submit" class="form-control" style="float:left;width:150px;margin-left:15px;margin-top:0px;" value="Submit" />
  </div>
  </form><br>

<canvas id="chart"></canvas>

JS

<?php
      function addFooter() {
      global $d1, $db;
      echo <<< FOOTERSCRIPT
      <script>
      $("#chartdata").submit(function(){
        var cc = $('#cc').val();
        var test = "/sci_packaging_report_data.php?d1=$d1&db=$db&cc="+cc;
        console.log(test);

        $.ajax({
          url : "/sci_packaging_report_data.php?d1=$d1&db=$db&cc="+cc,
          type : "GET",
          success : function(data){
            console.log(data);
            var data = JSON.parse(data);
            var dataset = [data[1],data[2],data[3],data[4],data[5]];
            console.log(dataset);

            var ctx = document.getElementById('chart');

            var myChart = new Chart(ctx, {
              type: 'bar',
              data: {
                labels: ['2 Weeks Before Start', 'Saturday Before Start', 'Saturday of Start Week', 'End of Second Week', '3 Weeks After Start'],
                datasets: [
                  {
                    label: data[0] + ' Packaging',
                    data: [data[1],data[2],data[3],data[4],data[5]],
                    backgroundColor: '#D6E9C6',
                  },
                  {
                    label: 'Expected Numbers',
                    data: [60,70,80,90,100],
                    backgroundColor: '#FAEBCC',
                  }
                ]
              },
              options: {
                scales: {
                  xAxes: [{ stacked: true }],
                  yAxes: [{ stacked: true }]
                }
              }
            });

          }, //success function close
          error : function(data) {
            console.log(data);
          }
        }); //ajax close
      });
      </script>
FOOTERSCRIPT;
  }

所以我遇到的问题是，当我提交参数时，图表会瞬间闪烁然后消失。我可以看到它有正确的标题，但速度太快，无法查看是否填充了其余数据。

我获取了图表所需的代码部分并将其放入测试文件中，以查看是否可能我的代码的其他部分搞砸了它并且它做了同样的事情（瞬间闪烁然后消失）

有人知道吗？

Answer 1

我想通了！我没有通过 e 并使用 prevent default 。所以它只是让我的桌子焕然一新。