如何将字典传递给 ChartJS？

Question

我正在尝试将字典从我的 Flask 文件传递到我的 ChartJS，但数据没有加载到我的图表上。我认为传递我的数据有问题。这是我的字典的格式。基本上，这是我转换为字典的时间序列数据框。

[{'dates': Timestamp('2021-12-31 00:00:00'), 'cases': 2},
 {'dates': Timestamp('2022-01-01 00:00:00'), 'cases': 0},
 {'dates': Timestamp('2022-01-02 00:00:00'), 'cases': 1},
 {'dates': Timestamp('2022-01-03 00:00:00'), 'cases': 1},
 {'dates': Timestamp('2022-01-04 00:00:00'), 'cases': 1},
 {'dates': Timestamp('2022-01-05 00:00:00'), 'cases': 1},
 {'dates': Timestamp('2022-01-06 00:00:00'), 'cases': 1},
 {'dates': Timestamp('2022-01-07 00:00:00'), 'cases': 1},
 {'dates': Timestamp('2022-01-08 00:00:00'), 'cases': 1},
 {'dates': Timestamp('2022-01-09 00:00:00'), 'cases': 1},
 {'dates': Timestamp('2022-01-10 00:00:00'), 'cases': 1},
 {'dates': Timestamp('2022-01-11 00:00:00'), 'cases': 1},
 {'dates': Timestamp('2022-01-12 00:00:00'), 'cases': 1},
 {'dates': Timestamp('2022-01-13 00:00:00'), 'cases': 1}]

这是我的烧瓶文件：

@app.route("/forecast-calculation", methods=["POST"])
    def get_result():
        days_ahead = 13
        time_steps = 30
        if request.method == "POST":
            file = request.files['file']
            basepath = os.path.dirname(__file__)
            path = os.path.join(basepath, "user-uploads", file.filename)
            df = file.save(path)
            model, scaler, df = forecast.load(path)
            pred_values = forecast.forecast(df, days_ahead, model, time_steps, scaler)
            dict = forecast.final_df(df, pred_values, days_ahead, scaler)
        return render_template("forecast-calculation.html", dict = dict)

这是我的 HTML 文件

<canvas id="forecastCalculationchart"></canvas>
          <script>
            var parsed = JSON.parse('{{dict | tojson}}');
            labels = parsed.dates.map(function(elem){
              return elem.labels;
            })
            cases = data.cases.map(function(elem){
              return elem.cases;
            })
                const forecastCalculation = document.getElementById('forecastCalculationchart');
                const forecastCalculationchart = new Chart(forecastCalculation, {
                    type: 'line',
                    data: {
                        labels: labels,
                        datasets: [{
                            data:cases,       
                            backgroundColor: '#001F23',
                            borderColor: '#001F23',
                            borderWidth: 2,
                            tension: 0.2
    
                        }]
                    },
                    options: {
                      plugins: {
                          legend: {
                              display: false
                          }
                      }
                  }
                      
                });
            </script>

Answer 1

我解决了它，我所做的是将我的结果转换为列表而不是数据框并创建一个元组列表，然后将它传递到我的 jinja 文件中。

这是我的 python 文件：

 pred_dates = predict_dates(df, days_ahead)
 dates_list = [t.strftime("%Y-%m-%d") for t in pred_dates]
        
 forecasted_cases = np.asarray(pred_cases, dtype=np.int64)
 forecasted_cases = forecasted_cases.tolist() 
    
 forecasted_tuple = [(dates_list[i], forecasted_cases[i]) 
 for i in range(0, len(dates_list))]
 return forecasted_tuple

还有我的控制器：

 pred_values = forecast.forecast(df, days_ahead, model, time_steps, scaler)
 forecasted_tuple = forecast.get_result(df, pred_values, days_ahead, scaler)

 labels = [row[0] for row in forecasted_tuple]
 values = [row[1] for row in forecasted_tuple]
 return render_template("forecast-calculation.html", labels=labels, values=values)

如何将字典传递给 ChartJS？

How to pass a dictionary to ChartJS?

javascript

python

flask

chart.js