时间戳

首页 > 解决方案 > 如何使用烧瓶为chart.js创建时间序列数组？

javascript - 如何使用烧瓶为chart.js创建时间序列数组？

问题描述

我有一些 python 代码成功地将两个数组传递给我的 html 模板

@app.route('/line')
def line():
    df= av_query(av_start_date,av_end_date,'44201')
    df['dt']=pd.to_datetime(df['Date'])
    df['RawValue']=np.where(df['Units']=='007',df['RawValue']*1000,df['RawValue'] )
    temp_df=df[df['Site']=='SM']
    dates = temp_df['dt']
    values = temp_df['RawValue']


    return render_template('line.html', title='Ozone Data',dates=dates[:5], values=values[:5], max_n=100)

在我的 html 模板中，我测试了这个绘图代码

  <center>
        <h1>{{ title }}</h1>
        
        
        
        <canvas id="myChart" width="600" height="400"></canvas>
        
        <script>
            



            var s1 = {
              label: 's1',
              borderColor: 'blue',
              data: [
                { x: '2017-01-06 18:39:30', y: 100 },
                { x: '2017-01-07 18:39:28', y: 101 },
              ]
            };

            var s2 = {
              label: 's2',
              borderColor: 'red',
              data: [
                { x: '2017-01-07 18:00:00', y: 90 },
                { x: '2017-01-08 18:00:00', y: 105 },
              ]
            };
                        
            var ctx = document.getElementById('myChart').getContext('2d');
            var chart = new Chart(ctx, {
              type: 'line',
              data: { datasets: [s1, s2] },
              options: {
                scales: {
                  xAxes: [{
                    type: 'time'
                  }]
                }
              }
            });

        </script>
      </center>

如何用我的数据替换虚拟s1数据s2？

我试图将每一行推送到数据集，但这似乎不起作用。

    var s1 = {
      label: 's1',
      borderColor: 'blue',
      dates=dates
      values=values
      data: []
      for (i=0; i<=dates.length; i++){
      data.push({x:dates[i], y:values[i]})
      }
    };

标签： javascriptpythonflask

解决方案

我发现最简单的方法是使用模板在页面中呈现一个变量。

如果您的数据在数组或字典中，请确保在将其传递给模板之前将其转换为 json，然后在模板呈现如下时将其传递给 javascript：

<script>
   const data = {{ data|safe }};
</script>

JSON 将本机呈现为 Javascript，你可以用它做你想做的事。

确保将其通过safe过滤器，否则它将被转义。

推荐阅读