为什么Java脚本“自我更新”图不更新图？

编程问答 2022-06-10

问题描述

我已经编写了一个代码来使用JavaScript和Ajax绘制自更新图，我正在关注此示例（https://www.fusioncharts.com/charts/realtime-charts/speedometer-gague）并尝试在我的项目中实现。 我正在使用的代码是：

<!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>

我在Django中使用一个简单函数返回给定的jsonRespnse，如下所示：

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

如何正确拟合数据，以便它可以动态更新图形。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

ajaxdjangojavascript