Javascript 使用来自外部JSON的数据构建highchart图表

我试图使用JQuery读取highcharts图表中的JSON文件，但失败了。我在一个文件中得到了这个JSON：

[{"Bellman-Ford": {"totalRate": 1.123, "way": [], "time": 0.00014495849609375}}, {"genetic": {"totalRate": 1.4566, "way": [], "time": 0.1541710883}}, {"recuit": {"totalRate": 1.782, "way": [], "time": 0.00004728945}}]

我的图表是这样的：

$(function () {
    $('#rate').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Comparison of the final rates'
        },
        subtitle: {
            text: 'DNF'
        },

        yAxis: {
            min: 0,
            title: {
                text: 'Rate (USD)'
            }
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        animation : true,
        series: [{
            name: 'Bellman-Ford',
            data: [49.9] //bf rate

        }, {
            name: 'Genetic Algorithm',
            data: [83.6] // genetic rate

        }, {
            name: 'Recuit',
            data: [34.6] // recuit rate

        }]
    });
});

---

我希望使用来自JSON的数据，而不是那些硬编码的数据。每个算法的速率数据（遗传算法、模拟退火算法和bellman-ford算法）。我想我没有很好地理解异步函数的问题。

更新从json文件获取数据的代码

  $(function () {
  var data =[];  
  $.getJSON("results.json", function(json) {

 $.each(json, function(idx, obj){ 
    $.each(obj, function(key, value){            
        data.push({name:key , data: [value.totalRate]});
    });
   });
     });
   $('#rate').highcharts({
chart: {
    type: 'column'
},
title: {
    text: 'Comparison of the final rates'
},
subtitle: {
    text: 'DNF'
},

yAxis: {
    min: 0,
    title: {
        text: 'Rate (USD)'
    }
},
plotOptions: {
    column: {
        pointPadding: 0.2,
        borderWidth: 0
    }
 },
 animation : true,
 series:data 
});
});

若json数据和JavaScript变量位于同一页面中，请使用以下代码

var data =[];
var json = [{"Bellman-Ford":{"totalRate":1.123,"way":[],"time":0.00014495849609375}},{"genetic":{"totalRate":1.4566,"way":[],"time":0.1541710883}},{"recuit":{"totalRate":1.782,"way":[],"time":0.00004728945}}];

   $.each(json, function(idx, obj){ 
    $.each(obj, function(key, value){            
        data.push({name:key , data: [value.totalRate]});
    });
 });

见工作

当您从服务器获取json时，将其格式化总是很好的。UI/javascript上应该没有太多处理

我们检索JSON，它由jQuery自动解析

我们在主数组中循环，使用for of直接访问对象

我们使用

for in

遍历对象，以访问属性名称，然后访问数据本身

数据和图表是在接收到JSON后使用的

done（）

方法生成的

$（函数（）{
//获取json
$.ajax({
url:“result.json”，
数据类型：“json”，
}).done（函数（myData）{
//初始化数据数组
var mySeries=[]；
//循环遍历对象
for（myData的var myObj）{
//循环对象的属性（似乎只有一个）
for（myObj中的变量myName）{
//构建数据
mySeries.push({
姓名：我的名字，
数据：[myObj[myName].totalRate]，
});
}
}
美元（“#汇率”）。高图({
图表：{
类型：“列”
},
标题：{
正文：“最终费率比较”
},
副标题:{
文本：“DNF”
},
亚克斯：{
分:0,，
标题：{
正文：“汇率（美元）”
}
},
打印选项：{
专栏：{
点填充：0.2，
边框宽度：0
}
},
动画：没错，
系列：mySeries
});
});
});

然后我们可以在图表选项中使用它：

series: mySeries

更新2015-09-23 15:35+0000 这是一个简短的说明，说明了对此答案的评论

OP在评论中说：

---

我有一个语法错误：uncaughtsyntaxerror:意外标识符：for（myData的var myObj）{

另一条评论接着说：

更改：

for（myData的var myObj）{..}

为

for（myData的var myObj）{..}

使用

for…in

迭代索引而不是值，这就需要使用

myData[myObj]

来访问底层对象。还有一段时间，在数组上使用

for…in

返回其length属性，这是不需要的，需要使用

for（var i=0；i

是的，但我的JSON在另一个文件中。你是说我上面提到的JSON格式吗？还是想问如何获取？使用$（document）.ready（function（）{$.getJSON（“此处的JSON路径”，function（JSON）{将我的函数和highchart放入其中}）JSON在一个文件result.JSON中，javascript在另一个文件chart.JSON中使用，例如：$.getJSON（“results.JSON”，function（JSON）{$.each（JSON，function（idx，obj）{$.each（obj，function（key，value）{data.push（{name:key，data:[value.totalRate]}）；}）；}；}如果我的json在file@mel您需要首先使用
xmlHttpRequest
或
jQuery.ajax（）
请求它。我有一个语法错误：未捕获的语法错误：意外标识符：for（myData的var myObj）{@mel我无法在我这方面重现该错误。可能是JSON格式不正确？或者代码被错误复制。更改：
for（var myData中的myObj）{..}
to
for（var myData中的myObj）{..}