我正在使用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; }
现有产出如下:
预期产出是:
任何人都可以帮助我达到我预期的输出.
提前致谢.