如何使用json数据绘制一个HighChart

Question

我对这些图很陌生，并试图在各种图形框架中使用。我有一个json数据，并想绘制一个多系列的折线图。我已经有了这个工作在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/

$（函数（）{

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 

     }); 

}）;