Question

如何将数据从API推入数据集以显示多条折线图。我已经给出了我的API返回的数据模型。还有下面的脚本

如何将API数据中的数据和标签插入数据集和标签以显示多条折线图在API数据中，第一个数组代表LABEL，第二个第三数组代表数据。

\([^p]*\)

Answer 1

您在这里：

var self = this;
axios
  .get("http://localhost:5000/api/city")
  .then(res => {
    self.result = res.data;
    let [labels, ...data] = res.data;

    self.labels = labels;
    let dataSet = data.map((item, index) => {
      return {
        label: labels[index],
        data: item
      };
    });

    this.renderChart(
      {
        labels: [],
        datasets: dataSet
      },
      { responsive: true, maintainAspectRatio: false }
    );
  })
  .catch(function(error) {
    console.log("Error:", error);
  });

Answer 2

您所有的分配数据似乎都可以。但是，当您调用renderChart()绘制图表时，就是将labels分配为一个空数组。应该是：

self.renderChart(
    {labels: self.labels, datasets: self.datasets}, 
    {responsive: true, maintainAspectRatio: false }
);

有关renderChart

的更多信息

我在这里对您有个建议：

内部then()回调函数this是指该回调函数。因此，this.datasets和this.renderChart可能都未定义。因此，您应该使用self而不是this。

如何将数据从api推送到数据集中

2 个答案: