Chart.js 没有从 Flask 获取更新的值

Question

在这里我使用 Flask 从 API 获取值的项目。然后使用 chart.js 将其添加到图表中

我让它有点工作，我遇到的问题是我用来将值添加到图表中的变量，但它不会更改变量，我添加到图表中，每当 API 中的值发生变化时.

含义： 售价：10.3 卖价变化到 10.4 售价：10.3

这是我的python代码：

@app.route('/product/<product>')
def productPage(product):
    price = []
    data = requests.get(
        'https://api.hypixel.net/skyblock/bazaar?key=').json()
    sell = data['products'][product]['sell_summary']
    for x in sell:
        price.append(x['pricePerUnit'])
    currentSell = data['products'][product]['sell_summary'][0]['pricePerUnit']
    return render_template('product.html', product=product, price=price, currentSell=currentSell)


@app.route('/graph_update/<product>', methods=['GET', 'POST'])
def graph_update(product):
    data = requests.get(
        'https://api.hypixel.net/skyblock/bazaar?key=').json()
    currentSell = data['products'][product]['sell_summary'][0]['pricePerUnit']
    return jsonify('', render_template('graph_update.html', currentSell=currentSell))

这里是 HTML/JS：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div class="container" style="position: relative; height: 40vh; width: 80vw">
  <canvas style="width: 25%" id="myChart"></canvas>
</div>
<input
  type="button"
  value="add data"
  style="margin-top: 25%"
  onclick="addData()"
/>
<h1 style="padding-top: 25%">{{product}}</h1>
{% for sell in price %}
<p id="sellprice">{{ sell }}</p>
{% endfor %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
  var sellprice = JSON.parse("{{ currentSell | tojson | safe }}");
  var product = "{{ product }}";
  let myChart = document.getElementById("myChart").getContext("2d");
  let priceChart = new Chart(myChart, {
    type: "line", // bar, horizontalBar, pie, line, doughnut, radar, polarArea
    data: {
      labels: [],
      datasets: [
        {
          label: "Sell Price",
        },
      ],
    },
    options: {},
  });

  var getData = function () {
    $.ajax({
      url: "/graph_update/" + product,
      success: function (data) {
        // process your data to pull out what you plan to use to update the chart
        // e.g. new label and a new data point

        // add new label and data point to chart's underlying data structures
        var sellprice = JSON.parse("{{ currentSell | tojson | safe }}");
        priceChart.data.labels.push(sellprice);
        priceChart.data.datasets[0].data.push(sellprice);

        // re-render the chart
        priceChart.update();
      },
    });
  };

  // get new data every 3 seconds
  setInterval(getData, 10000);
</script>

谢谢！

Answer 1

问题是您在端点/graph_update/<product> 上的python 代码应该以JSON 形式返回数据，目前它正在执行以下操作：

 return jsonify('', render_template('graph_update.html', currentSell=currentSell))

你需要返回类似的东西

return jsonify(data) # or subset of data that you need to pass