xyzivan 2021-05-08 19:28 采纳率: 100%
浏览 137
已采纳

flask与html交互问题

自觉python,使用flask做后台,用于产生一个随机数组,目的是传到html中的echarts中去,使图表动起来,关键代码如下 :

FLASK:

@app.route('/',methods=["get","post"])
def hello_world():
    x = []
    x = utils.xiaoliang()
    time.sleep(1)
    print(x)
    return render_template("index.html",x=x)

HTML:
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom,初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '测试'
        },
        tooltip: {},
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: ["1月", "2月", "3月", "4月", "5月", "6月"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [199, 73, 78, 64, 73, 83]
             {
        }]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    function getCharts() {
        $.ajax(
            {
                url: "/",
                type: "get",
                success: function (data) {
                    myChart.setOption({
                        series: [{

                            data: {{ x|tojson }}

                        }]
                    })
                }
            })
    }
    setInterval(getCharts,1000)

遇到问题是打开后开始会显示[199, 73, 78, 64, 73, 83] 这个数组的内容,过一秒后显示随机产生的{{ x|tojson }}这个内容,我的目标是每过一秒就产生一组随机数并显示,但是 setInterval(getCharts,1000) 好像只运行了一次。

请问这个是哪里出了问题

 

 

  • 写回答

2条回答 默认 最新

  • Go 旅城通票 2021-05-08 21:00
    关注

    不太了解Python,不过看你代码肯定是有问题的,setInterval应该请求另外一个网址获取数据类似[199, 73, 78, 64, 73, 83]这种数据,而不是直接请求首页获取整个页面,这样数据是不对的,得到的是html。

     

    @app.route('/',methods=["get","post"])
    def hello_world():
        x = []
        x = utils.xiaoliang()
        time.sleep(1)
        print(x)
        return render_template("index.html",x=x) 
    def data(): 
      x = [] 
      x = utils.xiaoliang() 
      return x#不知道是不是这样,data要返回[199, 73, 78, 64, 73, 83]这种格式的字符串

    然后ajax请求data整个地址

     function getCharts() {
            $.ajax(
                {
                    url: "/data",//
    cache:false,//禁止缓存
                    type: "get",
                    success: function (data) {
                        myChart.setOption({
                            series: [{
    
                                data: data
    
                            }]
                        })
                    }
                })
        }
        setInterval(getCharts,1000)
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?