JavaScript无法在html中将JSON对象填充到条形图中_Javascript_Json_Plotly.js

JavaScript无法在html中将JSON对象填充到条形图中

javascript json

JavaScript无法在html中将JSON对象填充到条形图中,javascript,json,plotly.js,Javascript,Json,Plotly.js,我当前有一个JSON文件中的数据，我正在将其导入app.js文件中。我希望能够绘制一个非常简单的条形图，但由于某些原因，数据根本无法绘制我的JSON文件如下所示 {“值”：[44.0,42.0,41.0,40.0,38.0,37.0,36.0]，“分数”：[1,2,6,3,7,11,121]} 这是我的密码： var value = []; var score = []; d3.json("../static/assets/js/data.json", function(

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

我的JSON文件如下所示

{“值”：[44.0,42.0,41.0,40.0,38.0,37.0,36.0]，“分数”：[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, 2, 6, 3, 7, 11, 121]
                                             // length: 1
                                             // __proto__: Array(0)

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

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

我现在不担心美学，因为我想先画出图表

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

当我知道结果应该是

[{...}]
 0: {x: Array(7), y: Array(7), type: "bar"}
     type: "bar"
    x: (7) [44, 42, 41, 40, 38, 37, 36]
    y: (7) [1, 2, 6, 3, 7, 11, 121]
    __proto__: Object
    length: 1
 __proto__: Array(0)

我是JavaScript的初学者，我有点纠结于我的错误可能是什么导致了这一点。

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

通过使用

value.push（data.value）

可以创建嵌套数组。因此，您的数组不是通过编写

value=data.value

来实现的

[1,2,3]

，而是

[1,2,3]

d3.json

是一个异步调用，这意味着只有在调用回调函数（

function（data）{}

）后，数据才能安全地使用。您应该将生成图表的代码放入回调函数中

请参见下面的示例。我用我的

jsonRequest

函数模拟了

d3.json

，您可以忽略该部分。通过将plotly调用放入回调函数，您可以省略

值

和

分数

数组，直接访问

数据.value

和

数据.score

const mockJson={
值：[44,42,41,40,38,37,36]，
分数：[1,2,6,3,7,11,121]
}
const jsonRequest=函数（）{
返回新承诺（函数（解析）{
setTimeout（函数（）{
解析（mockJson）
}, 2000);
});
}
jsonRequest（）.then（函数（数据）{
变量跟踪={
x:data.value，
y:data.score，
类型：“条”
};
Plotly.newPlot（'myDiv'，[trace]）
}
)