Question

我的High Charts有问题，我想显示图表以显示此示例JSON数据的详细信息

[{"eventName":"ABC","countError":147391},"eventName":"DEF","countError":117926}]

JSON代码本身只包含2个参数， eventName 和计数错误。

我使用的代码分为AJAX函数：

function getSumErrorSummary(callback) {
        $.ajax({
            type : 'GET',
            url : 'ErrorSummaryServlet',
            dataType : 'JSON',
            success : function(data, textStatus, jqXHR) {
                callback(data);    
            },
            error : function(jqXHR, textStatus, errorThrown) {
                console.log("Cannot getting Error Summary Servlet," + textStatus.toString());
            },
        });
    }

然后我使用此代码var objects = [];

将数组放入对象中

然后我使用这个逻辑调用AJAX函数：

getSumErrorSummary(function(data){
    $.each(data, function (i, item) {
        //console.log([item.eventName, item.countError]);
        console.log("starting...");
        objects.push([item.eventName, item.countError]);
        console.log("done");
    })
});

var options = {
    chart : {
        type : 'column',
        margin : 75,
        options3d : {
            enabled : true,
            alpha : 10,
            beta : 25,
            depth : 70
        }
    },
    title : {
        text : 'Subtotal Error Summary'
    },
    plotOptions : {
        column : {
            depth : 25
        }
    },
    xAxis : {
        title :{
            text: 'Names'
        }
    },
    yAxis : {
        title : {
            text : 'Sub total'
        }
    },
    series : [{
        data: objects,
        name: 'Click Error'
    }]
}

$('#flot-line-chart').highcharts(options);

我已经初始化了每个数据的函数被推送到一个名为objects的数组。然后将每个对象放入highcharts数据系列中。但除非x，y标签和系列名称，否则图表不会显示任何内容。

有什么想法吗？请提供建议。

由于

更新1

我将代码更改为：

getSumErrorSummary(function(data){
         console.log("starting...");
          $.each(data, function (i, item) {
                //console.log([item.eventName, item.countError]);
                objects.push(data.map(function (d, i) {
                    return { name: d.eventName, data: [d.countError] };
                }));
            })
        console.log("done");
    });

但在控制台日志调试器中，它显示为空[]。

Answer 1

您的JSON数据应该像

[{ name: 'ABC', data: [147391] }, { name: 'DEF', data: [117926] }]

OR 如果您不想更改它，请使用此功能创建对象

<强>更新

var options = {
    chart : {
      ......
    series : []  //no data while initializing
};

getSumErrorSummary(function(data) {
    console.log(object) // undefined
    var object = data.map(function(d, i) { 
                return { name: d.eventName, data: [d.countError] }; 
             });
    console.log(object); //[{ name: ... }]

    //set object to options
    options.series = object;

    // call your chart function here
    $('#flot-line-chart').highcharts(options);
});

选中 JSFiddle （已更新）

将值从JSON放到高图表中

1 个答案: