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

Build a highchart chart using data from an external JSON

本文关键字：数据 构建 高图图 JSON 外部      更新时间：2023-09-26

我试图读取JSON文件在highcharts图表使用JQuery，但我失败了。我在一个文件中得到了这个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)的速率数据。我想我没有很好地理解异步函数的问题
  1. 我们检索JSON，它被jQuery自动解析
  2. 我们循环遍历主数组，使用for of直接访问对象
  3. 我们使用for in循环遍历对象以访问属性名，然后访问数据本身

接收到JSON后，使用jQuery.ajax()的done()方法构建数据和图表。

$(function () {
    // get the json
    $.ajax({
        url:      "result.json",
        dataType: "json",
    }).done(function(myData) {
        // initialize the data array
        var mySeries = [];
        // loop through the objects
        for(var myObj of myData) {
            // loop through the object's properties (seemingly only one)
            for(var myName in myObj) {
                // build data
                mySeries.push({
                    name : myName,
                    data : [myObj[myName].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: mySeries
        });
    });
});

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

series: mySeries
更新时间2015-09-23 15:35 +0000

这是一个简短的注释，针对这个答案的评论。

在评论中，OP说:

我有一个语法错误:未捕获SyntaxError:意外标识符:for(var myObj of myData) {

另一条评论说:

Change: for(var myObj of myData) {..} to for(var myObj in myData) {..}

使用for...in迭代索引而不是值，这就需要使用myData[myObj]来访问底层对象。也有一段时间，在数组上使用for...in返回其长度属性，这是不希望的，需要使用for(var i=0; i<array.length; ++i)。

更多细节见MDN文档:

  • for...in
  • for...of

更新从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时，格式化json总是好的。在UI/javascript上不应该有太多的处理。

相关文章：