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

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

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

      <script>
     data() {
     return {

        labels: [ ],
         result:'',
      datasets: [
        {
          label: "Data One",
           data: [ ]
         },
          {
          label: "Data Two", 
          data: [ ]
          }
        ]
       };
     }

  var self=this;
      axios
        .get("http://localhost:5000/api/city" )
        .then(res => { 
         self.result = res.data;
         //console.log(self.result )
         self.labels = self.result[0];
         self.datasets[0].data=self.result[1];
         self.datasets[1].data=self.result[2];
         console.log('label',self.labels)
          this.renderChart(
            {
              labels: [],
              datasets: this.datasets
            },
            { responsive: true, maintainAspectRatio: false }
          );
        })
        .catch(function(error) {
          console.log("Error:", error);
        });



        //below is my API data

       [
          ["2014-01-01","2014-01-01","2014-01-02","2014-01-03","2014-01-04"], 
          [1,11,12,10,4],
          [14,4,14,12,4] 
       ]

数据（）{
返回{
标签：[]，
结果：“”，
数据集：[
{
标签：“数据一号”，
数据：[]
},
{
标签：“数据二”，
数据：[]
}
]
};
}
var self=这个；
axios
.get（“http://localhost:5000/api/city" )
.然后（res=>{
self.result=res.data；
//console.log（self.result）
self.labels=self.result[0]；
self.dataset[0]。data=self.result[1]；
self.dataset[1]。data=self.result[2]；
console.log（'label'，self.labels）
这是我的艺术(
{
标签：[]，
datasets:this.datasets
},
{响应：true，维护AspectRatio:false}
);
})
.catch（函数（错误）{
日志（“错误：”，错误）；
});
//下面是我的API数据
[
["2014-01-01","2014-01-01","2014-01-02","2014-01-03","2014-01-04"], 
[1,11,12,10,4],
[14,4,14,12,4] 
]

给你：

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);
  });

---

您的所有分配数据似乎都正常。但是当您调用

renderChart（）

绘制图表时，您将

标签指定为空数组。应该是：

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

更多关于

我有一个建议给你：

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);
  });

内部
then（）
回调函数
此
是指该回调函数。因此，
this.dataset
可能未定义，以及
this.renderChart
。因此，您应该使用
self
而不是
this