JavaScript无法完全将JSON对象填充到html中的条形图

问题描述

我目前有导入到我的app.js文件中的JSON文件中的数据。我希望能够绘制一个非常简单的条形图，但是由于某种原因，数据根本无法绘制。

我的JSON文件如下所示 {"value": [44.0,42.0,41.0,40.0,38.0,37.0,36.0],"score": [1,2,6,3,7,11,121]}

这是我的代码：

var value = [];
var score = [];

d3.json("../static/assets/js/data.json",function(data) {
        console.log(data);

        value.push(data.value)
        
        console.log(value) // shown on console as [Array(7)]

        score.push(data.score)
        
        console.log(score) // shown on console as [Array(7)]
        
    })

console.log(value) //shows up on the console as []
                                             // 0: (7) [44,42,41,40,38,37,36]
                                             // length: 1
                                             // __proto__: Array(0)

console.log(score) //shows up on the console as []
                                             // 0: (7) [1,121]
                                             // length: 1
                                             // __proto__: Array(0)

var trace = {
    x: value,y: score,type: "bar"
};

Plotly.newPlot('myDiv',[trace])

我现在不担心美观，因为我希望能够先绘制图表。

当我console.log（[trace]）时，我得到

[{...}]
 0: {x: Array(1),y: Array(1),type: "bar"}
     type: "bar"
    x: [Array(7)]
       0 : (7) [44,36]
    y: [Array(7)]
       0 : (7) [1,121]
    __proto__: Object
    length: 1
 __proto__: Array(0)

我知道结果应该是

[{...}]
 0: {x: Array(7),y: Array(7),type: "bar"}
     type: "bar"
    x: (7) [44,36]
    y: (7) [1,121]
    __proto__: Object
    length: 1
 __proto__: Array(0)

我是JavaScript的初学者，对于导致此错误的原因我有些困惑。

解决方法

您的代码中有两个可能的错误：

1. 通过使用value.push(data.value)，您可以创建嵌套数组。因此，您的数组是[1,2,3]。而不是通过编写value = data.value来实现的[[1,3]]。
2. d3.json是一个异步调用，这意味着只有在调用回调函数（function(data) {}）后，您的数据才能安全地可用。您应该将生成图表的代码放入回调函数中。

请参见下面的示例。我用d3.json函数模拟了jsonRequest，您可以忽略该部分。通过将plotly调用放入回调函数中，可以省略value和score数组，而直接访问data.value和data.score。

const mockJson = {
  value: [44,42,41,40,38,37,36],score: [1,6,3,7,11,121]
}

const jsonRequest = function() {
  return new Promise(function(resolve) {
    setTimeout(function(){
      resolve(mockJson)
    },2000);
  });
}

jsonRequest().then(function(data) {        
    var trace = {
      x: data.value,y: data.score,type: "bar"
    };

    Plotly.newPlot('myDiv',[trace])        
  }
)

<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div id="myDiv"></div>