Question

我对图表不熟悉并尝试使用各种图形框架。我有一个json数据，并希望从中绘制一个多系列折线图。我现在正在尝试在Highchart中使用d3js。我的问题是如何嵌套轴的数据。 casecount - y轴 caseCreatedMonth - a轴 groupName - 是行。

提前致谢。

jsfiddle链接

http://jsfiddle.net/j_verma/juj55050/

var data = [{
    "groupName": "Casio GzOne",
        "caseCount": 8,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "GALAXY",
        "caseCount": 80,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "HTC ",
        "caseCount": 14,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "LG Mobile Phones",
        "caseCount": 27,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "Motorola",
        "caseCount": 29,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "Nokia Lumia",
        "caseCount": 3,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "Sony Ericsson Xperia",
        "caseCount": 4,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "Verizon Ellipsis",
        "caseCount": 18,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "iPhone 5",
        "caseCount": 29,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "iPhone 6",
        "caseCount": 33,
        "caseCreatedMonth": "10-2014"
}, {
    "groupName": "Casio GzOne",
        "caseCount": 4,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "DEFAULT",
        "caseCount": 32,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "GALAXY",
        "caseCount": 83,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "HTC",
        "caseCount": 14,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "HTC ",
        "caseCount": 7,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "LG Mobile Phones",
        "caseCount": 14,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "Motorola",
        "caseCount": 29,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "Nokia Lumia",
        "caseCount": 3,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "Sony Ericsson Xperia",
        "caseCount": 3,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "Verizon Ellipsis",
        "caseCount": 3,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "iPHONE",
        "caseCount": 14,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "iPhone 5",
        "caseCount": 13,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "iPhone 6",
        "caseCount": 16,
        "caseCreatedMonth": "11-2014"
}, {
    "groupName": "DEFAULT",
        "caseCount": 15,
        "caseCreatedMonth": "12-2014"
}, {
    "groupName": "GALAXY",
        "caseCount": 22,
        "caseCreatedMonth": "12-2014"
}, {
    "groupName": "Motorola",
        "caseCount": 3,
        "caseCreatedMonth": "12-2014"
}, {
    "groupName": "Nokia Lumia",
        "caseCount": 1,
        "caseCreatedMonth": "12-2014"
}, {
    "groupName": "Samsung Galaxy Note",
        "caseCount": 4,
        "caseCreatedMonth": "12-2014"
}, {
    "groupName": "iPhone 6",
        "caseCount": 4,
        "caseCreatedMonth": "12-2014"
}]


console.log('Sorting Data');
    var groupMap = [];
    for(var i = 0;i < data.length ; i++){
        console.log('Reading  '+i);
        var d = data[i];

        if(d == undefined) 
            continue;
        var arr =  groupMap[d.groupName];

        if(arr == undefined){
            console.log('Adding new '+d.groupName);
            groupMap[d.groupName] = {
                name: d.groupName,
                data: new Array()
            };
            arr = groupMap[d.groupName].data;
        } else {
            arr = arr.data;
            console.log('Not Adding New :' +d.groupName);
        }

        arr.push( 
             d.caseCount
        );
    }
    console.log(groupMap);
     $('#container').highcharts({
            title: {
                text: 'Request Resolved',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
                categories: ['10-2014', '11-2014', '12-2014', ]
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Case Count'
                }
            },
            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },
            series:groupMap
        });


    });

Answer 1

我解决了。任何有类似问题的人都可以检查这个问题。

http://jsfiddle.net/j_verma/juj55050/2/

$（function（）{

    var seriesData = [];
    var xCategories = [];
    var i, cat;
    for(i = 0; i < jsonMonthData.length; i++){
         cat = '' + jsonMonthData[i].caseCreatedMonth;
         if(xCategories.indexOf(cat) === -1){
            xCategories[xCategories.length] = cat;
         }
    }
    console.log(xCategories);

    for(i = 0; i < jsonMonthData.length; i++){

if(seriesData){

  var currSeries = seriesData.filter(function(seriesObject){ return

seriesObject.name == jsonMonthData [i] .groupName;}）;

  if(currSeries.length === 0){

      seriesData[seriesData.length] = currSeries = {name:

jsonMonthData [i] .groupName，data：[]};

其他{

      currSeries = currSeries[0];

  }

  var index = currSeries.data.length;

  currSeries.data[index] = jsonMonthData[i].caseCount;

}

其他{

   seriesData[0] = {name: jsonMonthData[i].groupName, data: 

   [jsonMonthData[i].caseCount]}

}

};

     $('#container').highcharts({

            title: {
                text: 'Request Resolved',
                x: -20 //center
            },

            subtitle: {
                text: '',
                x: -20
            },

            xAxis: {
                categories: xCategories
            },
            yAxis: {
                min: 0,
                title: {
                    text: 'Case Count'
                }
            },

            legend: {
                layout: 'vertical',
                align: 'right',
                verticalAlign: 'middle',
                borderWidth: 0
            },

            series:seriesData

        });

}）;

如何使用json数据绘制HighChart

1 个答案: