Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/django/21.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 为什么Java脚本自更新图不更新绘图?_Javascript_Django_Ajax_Fusioncharts - Fatal编程技术网

Javascript 为什么Java脚本自更新图不更新绘图?

Javascript 为什么Java脚本自更新图不更新绘图?,javascript,django,ajax,fusioncharts,Javascript,Django,Ajax,Fusioncharts,我已经编写了一段代码,使用JavaScript和Ajax绘制一个自我更新的绘图,我将遵循这个示例()并尝试在我的项目中实现。 我使用的代码是: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <link rel="stylesheet" href="

我已经编写了一段代码,使用JavaScript和Ajax绘制一个自我更新的绘图,我将遵循这个示例()并尝试在我的项目中实现。 我使用的代码是:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://epochjs.github.io/epoch/css/epoch.css"
    />
    <link
      rel="stylesheet"
      href="https://epochjs.github.io/epoch/css/epoch.css"
    />
  </head>
  <body>
    <div class="container">
        <div id="chart-container"></div>
    </div>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <!-- Latest compiled and minified CSS -->

    <!-- Latest compiled and minified JavaScript -->
    <script src="https://cdn.fusioncharts.com/fusioncharts/3.15.2/fusioncharts.js"></script> 
    <script src="https://cdn.fusioncharts.com/fusioncharts/3.15.2/themes/fusioncharts.theme.fusion.js"></script>
    <script src="https://epochjs.github.io/epoch/js/epoch.js"></script>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
    <script>

      FusionCharts.ready(function() {
   new FusionCharts({
      type: "angulargauge",
      renderAt: "chart-container",
      width: "400",
      height: "300",
      dataFormat: "json",
      dataSource: {
         chart: {
            caption: "Fly Ash Generation Rate",
            subCaption: "Belews Creek Power Station<br>In Metric Tonnes",
            theme: "fusion",
            showValue: "1"
         },
         colorRange: {
            color: [
               {
                  minValue: "0",
                  maxValue: "0.4",
                  code: "#62B58F"
               },
               {
                  minValue: ".40",
                  maxValue: ".60",
                  code: "#FFC533"
               },
               {
                  minValue: ".60",
                  maxValue: "1",
                  code: "#F2726F"
               }
            ]
         },
         dials: {
            dial: [
               {
                  value: "0.6",
                  toolText: "<b>$dataValue metric tonnes</b>"
               }
            ]
         }
      },
      events: {
         initialized: function(evt, args) {
            var chartRef = evt.sender;
            function addLeadingZero(num) {
               return num <= 0.6 ? "0" + num : num;
            }

            function updateData() {


              $.ajax({

                url:"{% url 'fetch_sensor_values_ajax' %}",
                success: function (response) {
                  const data = response;
                  const time = data['time'];
                  const ppm = parseFloat(data["y"]);
                  chartRef.feedData(ppm);

               }

              })
            }

            chartRef.intervalUpdateId = setInterval(updateData, 10);
         },

         disposed: function(evt, args) {
            clearInterval(evt.sender.intervalUpdateId);
         }
      }
   }).render();
});


    </script>
  </body>
</html>
如何正确拟合数据,使其能够动态更新图形

{"time": "202010-05 02:02:20", "y": 0.5366612110490295}