angularjs – 如何在amCharts中创建分组条形图？

发布时间：2020-12-17 10:23:13 所属栏目：安全来源：网络整理

导读：我正在使用amCharts在我的表单中创建图表.我想创建一个分组的条形图. 我的JSON数据是： [{date:'10-dec-2015',visits:4025,country:'USA'},{date:'10-dec-2015',visits:1182,country:'India'},visits:o,country:'Spain'},{date:'11-dec-2015',visits:1322,vi

我正在使用amCharts在我的表单中创建图表.我想创建一个分组的条形图.

我的JSON数据是：

[{date:'10-dec-2015',visits:4025,country:'USA'},{date:'10-dec-2015',visits:1182,country:'India'},visits:o,country:'Spain'},{date:'11-dec-2015',visits:1322,visits:1122,visits:1114,{date:'12-dec-2015',visits:984,{date:'13-dec-2015',visits:711,country:'Poland'},]

我现有的代码如下：

chartData = generateChartData();   //function call  
//creating column chart

var chart = AmCharts.makeChart("chartdiv",{
    "type": "serial","theme": "light","dataProvider": chartData,"categoryField": "date","rotate": false,"startDuration": 1,"categoryAxis": {
        "labelRotation": 90,"gridPosition": "start","position": "left","autoGridCount": false,},"trendLines": [],"graphs": [
        {
            "balloonText": "[[country ]]:[[value]]","fillAlphas": 0.8,"id": "AmGraph-1"+i,"lineAlpha": 0.2,"title": "title","type": "column","valueField": "visits","color":colors[0]
        }
    ],"chartScrollbar": {
        "autoGridCount": false,"graph": "AmGraph-1"+i,"scrollbarHeight": 10
    },"legend": {
        "align": "center","position": "right","markerType": "square","right": 6,"labelText": "[[title]]","valueText": "","valueWidth": 80,"textClickEnabled": true,"rollOverColor": "blue","fontSize": 13,"useGraphSettings": true

    },"guides": [],"valueAxes": [
        {
            "id": "ValueAxis-1","axisAlpha": 0
        }
    ],"allLabels": [],"balloon": {},"titles": [],"export": {
        "enabled": true
    },});
//function definition

 function generateChartData() {
    chartData = [];       
        for (var i = 0; i < $scope.datalength; i++) {
            var newdate = $scope.data[i].Date;
            var visits = $scope.data[i].visits;
            var country = $scope.data[i].country;

            chartData.push({
                date: newdate,visits: visits,country : country 
            });
        }          
    }       
    return chartData;
}

现有产出如下：

预期产出是：

任何人都可以帮助我达到我预期的输出.

提前致谢.

您需要做几件事来达到目标??：

1)将同一类别中的数据点分组到同一数据点,以便您的最终数据变为如下所示：

[ {
  date: '10-dec-2015',USA: 4025,India: 1182,Spain: 1000
},{
  date: '11-dec-2015',USA: 1322,India: 1122,Spain: 1114
},{
  date: '12-dec-2015',India: 984
},{
  date: '13-dec-2015',Poland: 711
} ]

2)为每个国家/地区创建图表：

"graphs": [ {
  "balloonText": "[[title]]:[[value]]","title": "USA","valueField": "USA"
},{
  "balloonText": "[[title]]:[[value]]","title": "India","valueField": "India"
},"title": "Spain","valueField": "Spain"
},"title": "Poland","valueField": "Poland"
} ]

3)使用stackType启用值轴上的堆叠：

"valueAxes": [ {
  "id": "ValueAxis-1","axisAlpha": 0,"stackType": "regular"
} ]

对于数据,由于您已经有一个处理源数据的函数,您可以修改它创建分组数据点,如上所述.

function generateChartData() {
  var chartData = [],categories = {};
  for ( var i = 0; i < $scope.datalength; i++ ) {
    var newdate = $scope.data[ i ].Date;
    var visits = $scope.data[ i ].visits;
    var country = $scope.data[ i ].country;

    // add new data point
    if ( categories[ newdate ] === undefined ) {
      categories[ newdate ] = {
        date: newdate
      };
      chartData.push( categories[ newdate ] );
    }

    // add value to existing data point
    categories[ newdate ][ country ] = visits;
  }
  return chartData;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!