获取返回的JSON数据以在vue Charts.js图表​​中使用时出现问题

时间:2019-05-30 00:05:45

标签: javascript arrays vue.js chart.js

这是不同的,因为自2016年起,它应该已经在检查器中修复,并且图表本身未正确显示。再次不是chrome inspector bug的重复。...

所以我正在用axios呼叫我的端点。...

返回的数据的示例是

 [
  {
    "report_name": "voltage", 
    "report_time": "Tue, 28 May 2019 19:04:38 GMT", 
    "report_value": 12.1726
  }, 
  {
    "report_name": "voltage", 
    "report_time": "Tue, 28 May 2019 19:04:43 GMT", 
    "report_value": 12.3142
  }, 
  {
    "report_name": "pumpstate", 
    "report_time": "Tue, 28 May 2019 19:14:59 GMT", 
    "report_value": 0.0
  }, 

我正在尝试重新格式化数组,以使其适用于散点图Charts.js中的数据...

 mounted() {
    this.getData();
  },
  methods: {
    getData(){
      this.axios
        .get("http://192.168.1.103:2000/hydrodata/1", {
          params: {
          }
        })
        .then(response => {
          var voltages = []
          var statuses = []
          var newobj = {}

          response.data.forEach(function (item, index) {
            if(item.report_name == 'voltagea'){
              newobj['x']=randomScalingFactor()
              newobj['y']=item.report_value
              voltages.push(newobj)
            }
            if(item.report_name == 'pumpstate'){
              /////LINE 51
              console.log(item.report_value)
              /////LINE 52
              console.log(item.report_time)
              newobj['x']=randomScalingFactor()
              //newobj.x=item.report_time
              newobj['y']=item.report_value
               /////LINE 56
              console.log(newobj)
              statuses.push(newobj)
              /////LINE 58
              console.log(statuses)
            }
          });
          console.log(voltages)
          console.log(statuses)
          console.log(response.data)
        })
        .catch(error => {
          console.log(error);
          this.errored = true;
        })
    }

函数 RandomScalingFactor 是用于设置随机X值的函数,现在我看到的是我的数组构建不正确。

1                                  RandomChart.vue:51 
Tue, 28 May 2019 21:49:46 GMT      RandomChart.vue:52
{x: -68, y: 1}                    RandomChart.vue:56
 x: 79y: 0
 __proto__: Object

因此,56上的Console.log显示了一些我不理解的内容。 它显示的是“正确的”对象,然后显示下面的错误值。...

当我将整个阵列记录到一个点上时......经过18次循环后,我得到:

(18) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…},  {…}, {…}, {…}, {…}, {…}]         RandomChar.vue:58
0: {x: 79, y: 0}
1: {x: 79, y: 0}
2: {x: 79, y: 0}
3: {x: 79, y: 0}
4: {x: 79, y: 0}
5: {x: 79, y: 0}
.....
145: {x: 79, y: 0}
146:
   x: 79
   y: 0
   __proto__: Object
147: {x: 79, y: 0}
length: 148

但是当我打开数组时,它的长度为148 ..只是我对在JS中构建数组感到困惑。...

0 个答案:

没有答案