当前位置:  开发笔记 > 编程语言 > 正文

如何在amCharts中创建分组栏?

如何解决《如何在amCharts中创建分组栏?》经验,为你挑选了0个好方法。

我正在使用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;
}

现有产出如下: 在此输入图像描述

预期产出是: 在此输入图像描述

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

提前致谢.

推荐阅读
wurtjq
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有