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;
  }

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

我把图表所需的代码部分放在一个测试文件中，看看是否可能是我的代码的其他部分搞砸了，它做了同样的事情（闪光瞬间消失）< / p>

有人有任何想法吗？

Answer 1

我明白了！我没有通过e并使用防止默认。所以它只是刷新和擦除我的桌子。