如何使用 json 数据绘制高图表

How to plot a HighChart with the json data

本文关键字：绘制 高图表 数据 json 何使用      更新时间：2023-09-26

我对图形有点陌生，并尝试了各种图形框架。我有一个 json 数据，想从中绘制一个多系列折线图。我已经为现在在Highchart中尝试的d3js工作了。我的问题是如何嵌套轴的数据。病例数 - Y 轴案例创建月 - a 轴组名称 - 是行。

提前谢谢。

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
        });

    });

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

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
        });

}）;

相关文章：