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

Question

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

我的 JSON 数据是:

  [{date:'10-dec-2015',visits:4025,country:'USA'},{date:'10-dec-2015',visits:1182,country:'India'},{date:'10-dec-2015',visits:o,country:'Spain'},{date:'11-dec-2015',visits:1322,country:'USA'},{date:'11-dec-2015',visits:1122,country:'India'},{date:'11-dec-2015',visits:1114,country:'Spain'},{date:'12-dec-2015',visits:984,country:'India'},{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",
            "position": "left",
            "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;
}

现有输出如下:

预期输出为:

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

提前致谢。

Answer 1

您需要做几件事才能实现目标:

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]]",
  "fillAlphas": 0.8,
  "lineAlpha": 0.2,
  "title": "USA",
  "type": "column",
  "valueField": "USA"
}, {
  "balloonText": "[[title]]:[[value]]",
  "fillAlphas": 0.8,
  "lineAlpha": 0.2,
  "title": "India",
  "type": "column",
  "valueField": "India"
}, {
  "balloonText": "[[title]]:[[value]]",
  "fillAlphas": 0.8,
  "lineAlpha": 0.2,
  "title": "Spain",
  "type": "column",
  "valueField": "Spain"
}, {
  "balloonText": "[[title]]:[[value]]",
  "fillAlphas": 0.8,
  "lineAlpha": 0.2,
  "title": "Poland",
  "type": "column",
  "valueField": "Poland"
} ]

3) 使用 stackType 在值轴上启用堆叠:

"valueAxes": [ {
  "id": "ValueAxis-1",
  "position": "left",
  "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;
}