多系列柱形图按AmCharts中的系列分组

时间:2014-04-11 16:30:54

标签: amcharts

你可以在AMCHATS中制作这样的东西吗?

http://www.anychart.com/products/anychart/docs/users-guide/Samples/sample-multi-series-column-chart.html

这是我的数据:

"dataProvider": [{
    "EjeX": "2009",
    "Tipo": "CA",
    "Sexo": "FEMENINO",
    "Dato": 0.63,
    "Tipo": "CA",
    "Sexo": "MASCULINO",
    "Dato": 0.625,
    "Tipo": "IC",
    "Sexo": "FEMENINO",
    "Dato": 0.883,
    "Tipo": "IC",
    "Sexo": "MASCULINO",
    "Dato": 0.856,
    "Tipo": "IICG",
    "Sexo": "FEMENINO",
    "Dato": 0.844,
    "Tipo": "IICG",
    "Sexo": "MASCULINO",
    "Dato": 0.812
}, {
    "EjeX": "2010",
    "Tipo": "CA",
    "Sexo": "FEMENINO",
    "Dato": 0.535,
    "Tipo": "CA",
    "Sexo": "MASCULINO",
    "Dato": 0.579,
    "Tipo": "IC",
    "Sexo": "FEMENINO",
    "Dato": 0.827,
    "Tipo": "IC",
    "Sexo": "MASCULINO",
    "Dato": 0.778,
    "Tipo": "IICG",
    "Sexo": "FEMENINO",
    "Dato": 0.765,
    "Tipo": "IICG",
    "Sexo": "MASCULINO",
    "Dato": 0.738
}, {
    "EjeX": "2011",
    "Tipo": "CA",
    "Sexo": "FEMENINO",
    "Dato": 0.639,
    "Tipo": "CA",
    "Sexo": "MASCULINO",
    "Dato": 0.617,
    "Tipo": "IC",
    "Sexo": "FEMENINO",
    "Dato": 0.796,
    "Tipo": "IC",
    "Sexo": "MASCULINO",
    "Dato": 0.754,
    "Tipo": "IICG",
    "Sexo": "FEMENINO",
    "Dato": 0.748,
    "Tipo": "IICG",
    "Sexo": "MASCULINO",
    "Dato": 0.745
}, {
    "EjeX": "2012",
    "Tipo": "CA",
    "Sexo": "FEMENINO",
    "Dato": 0.567,
    "Tipo": "CA",
    "Sexo": "MASCULINO",
    "Dato": 0.604,
    "Tipo": "IC",
    "Sexo": "FEMENINO",
    "Dato": 0.761,
    "Tipo": "IC",
    "Sexo": "MASCULINO",
    "Dato": 0.742,
    "Tipo": "IICG",
    "Sexo": "FEMENINO",
    "Dato": 0.75,
    "Tipo": "IICG",
    "Sexo": "MASCULINO",
    "Dato": 0.733
}, {
    "EjeX": "2013",
    "Tipo": "CA",
    "Sexo": "FEMENINO",
    "Dato": 0.596,
    "Tipo": "CA",
    "Sexo": "MASCULINO",
    "Dato": 0.58,
    "Tipo": "IC",
    "Sexo": "FEMENINO",
    "Dato": 0.614,
    "Tipo": "IC",
    "Sexo": "MASCULINO",
    "Dato": 0.6,
    "Tipo": "IICG",
    "Sexo": "FEMENINO",
    "Dato": 0.609,
    "Tipo": "IICG",
    "Sexo": "MASCULINO",
    "Dato": 0.596
}]

3 个答案:

答案 0 :(得分:1)

enter image description here使用Amcharts使用ASP.Net和C#堆叠图表。 这是为我工作的代码。

     <script src="amcharts/amcharts.js"></script>
    <script src="amcharts/serial.js"></script>
    <script src="ammap/themes/light.js"></script>
    <script src="JSfiles/jquery-1.10.2.min.js"></script>
     <script type="text/javascript">
         $(document).ready(function () {
             var chartDataResults = new Array();
             var chartgraphs = new Array();
             $.ajax({
                 type: 'POST',
                 dataType: 'json',
                 contentType: 'application/json',
                 url: 'Premiumsmssuccess.aspx/Chartload',
                 data: {},
                 success:
                     function (response) {
                         drawVisualization(response.d);
                     }
             });
             function drawVisualization(dataValues) {
                 for (var i = 0; i < dataValues.length; i++) {
                     var dataitem = dataValues[i];
                     var countrydate = dataitem.date;
                     var CNcountry = dataitem.CN
                     var IDcountry = dataitem.ID
                     var KHcountry = dataitem.KH
                     var MYcountry = dataitem.MY
                     var THcountry = dataitem.TH
                     var VNcountry = dataitem.VN
                     var CNsucess = dataitem.SUCCESSRateCN
                     var IDsucess = dataitem.SUCCESSRateID
                     var KHsucess = dataitem.SUCCESSRateKH
                     var MYsucess = dataitem.SUCCESSRateMY
                     var THsucess = dataitem.SUCCESSRateTH
                     var VNsucess = dataitem.SUCCESSRateVN

                     //alert(KHsucess);

                     chartDataResults.push({
                         date: countrydate,
                         CN: CNcountry,
                         ID: IDcountry,
                         KH: KHcountry,
                         MY: MYcountry,
                         TH: THcountry,
                         VN: VNcountry,
                         SUCCESSRateCN: CNsucess,
                         SUCCESSRateID: IDsucess,
                         SUCCESSRateKH: KHsucess,
                         SUCCESSRateMY: MYsucess,
                         SUCCESSRateTH: THsucess,
                         SUCCESSRateVN: VNsucess
                     });
                     var chart = AmCharts.makeChart("chartdiv", {
                         "type": "serial",
                         "theme": "light",
                         "depth3D": 20,
                         "angle": 30,
                         "legend": {
                             "horizontalGap": 10,
                             "useGraphSettings": true,
                             "markerSize": 10
                         },
                         "dataProvider": chartDataResults,
                         "valueAxes": [{
                             "stackType": "regular",
                             "axisAlpha": 0,
                             "gridAlpha": 0
                         }],
                         "graphs": [{
                             "balloonText": "[[China]], [[date]]<br><span style='font-size:14px;'><b>[[CN]]</b> ([[SUCCESSRateCN]]%)</span>",
                             "fillAlphas": 0.9,
                             "fontSize": 11,
                             "labelText": "[[SUCCESSRateCN]]%",
                             "lineAlpha": 0.5,
                             "title": "China",
                             "type": "column",
                             "valueField": "CN"
                         }, {
                             "balloonText": "[[Indonesia]], [[date]]<br><span style='font-size:14px;'><b>[[ID]]</b> ([[SUCCESSRateID]]%)</span>",
                             "fillAlphas": 0.9,
                             "fontSize": 11,
                             "labelText": "[[SUCCESSRateID]]%",
                             "lineAlpha": 0.5,
                             "title": "Indonesia",
                             "type": "column",
                             "valueField": "ID"
                         }, {
                             "balloonText": "[[Cambodia]], [[date]]<br><span style='font-size:14px;'><b>[[KH]]</b> ([[SUCCESSRateKH]]%)</span>",
                             "fillAlphas": 0.9,
                             "fontSize": 11,
                             "labelText": "[[SUCCESSRateKH]]%",
                             "lineAlpha": 0.5,
                             "title": "Cambodia",
                             "type": "column",
                             "valueField": "KH"
                         }, {
                             "balloonText": "[[Malaysia]], [[date]]<br><span style='font-size:14px;'><b>[[MY]]</b> ([[SUCCESSRateMY]]%)</span>",
                             "fillAlphas": 0.9,
                             "fontSize": 11,
                             "labelText": "[[SUCCESSRateMY]]%",
                             "lineAlpha": 0.5,
                             "title": "Malaysia",
                             "type": "column",
                             "valueField": "MY"
                         }, {
                             "balloonText": "[[Thailand]], [[date]]<br><span style='font-size:14px;'><b>[[TH]]</b> ([[SUCCESSRateTH]]%)</span>",
                             "fillAlphas": 0.9,
                             "fontSize": 11,
                             "labelText": "[[SUCCESSRateTH]]%",
                             "lineAlpha": 0.5,
                             "title": "Thailand",
                             "type": "column",
                             "valueField": "TH"
                         }, {
                             "balloonText": "[[Vietnam]], [[date]]<br><span style='font-size:14px;'><b>[[VN]]</b> ([[SUCCESSRateVN]]%)</span>",
                             "fillAlphas": 0.9,
                             "fontSize": 11,
                             "labelText": "[[SUCCESSRateVN]]%",
                             "lineAlpha": 0.5,
                             "title": "Vietnam",
                             "type": "column",
                             "valueField": "VN"
                         }],

                         "categoryField": "date",
                         "categoryAxis": {
                             "gridPosition": "start",
                             "axisAlpha": 0,
                             "gridAlpha": 0
                         },
                         "export": {
                             "enabled": true
                         }

                     });
                     jQuery('.chart-input').off().on('input change', function () {
                         var property = jQuery(this).data('property');
                         var target = chart;
                         chart.startDuration = 0;

                         if (property == 'topRadius') {
                             target = chart.graphs[0];
                             if (this.value == 0) {
                                 this.value = undefined;
                             }
                         }

                         target[property] = this.value;
                         chart.validateNow();
                     });
                 }
             }
         });
    </script>
---c# code
//Load Chart Event
        [WebMethod(EnableSession = true)]
        public static List<ChartDetails1> Chartload()
        {
            string Constring = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString.ToString();
            List<ChartDetails1> dataList = new List<ChartDetails1>();
            string country = string.Empty;
            using (SqlConnection con = new SqlConnection(Constring))
            {

                string StartDate = DateTime.Now.AddDays(-180).ToString("yyyy-MM-dd");
                string EndDate = DateTime.Now.ToString("yyyy-MM-dd");
                SqlCommand cmd = new SqlCommand("usp_PremiumSms_Aggrerator", con);
                cmd.CommandTimeout = 50;
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@country", country);
                cmd.Parameters.AddWithValue("@istartdate", StartDate);
                cmd.Parameters.AddWithValue("@ienddate", EndDate);
                cmd.Parameters.AddWithValue("@icomponents", "");
                con.Open();
                SqlDataAdapter da = new SqlDataAdapter(cmd);
                da.SelectCommand = cmd;
                DataTable dt = new DataTable();
                da.Fill(dt);
                con.Close();
                foreach (DataRow dtrow in dt.Rows)
                {
                    ChartDetails1 details = new ChartDetails1();
                    details.date = dtrow[0].ToString();

                    //details.CN = dtrow[0].ToString();

                    details.CN = dtrow[1].ToString() == "" ? 0 : Convert.ToDouble(dtrow[1].ToString());
                    details.ID = dtrow[2].ToString() == "" ? 0 : Convert.ToDouble(dtrow[2].ToString());
                    details.KH = dtrow[3].ToString() == "" ? 0 : Convert.ToDouble(dtrow[3].ToString());
                    details.MY = dtrow[4].ToString() == "" ? 0 : Convert.ToDouble(dtrow[4].ToString());
                    details.TH = dtrow[5].ToString() == "" ? 0 : Convert.ToDouble(dtrow[5].ToString());
                    details.VN = dtrow[6].ToString() == "" ? 0 : Convert.ToDouble(dtrow[6].ToString());
                    details.SUCCESSRateCN = dtrow[8].ToString() == "" ? 0 : Convert.ToDouble(dtrow[8].ToString());
                    details.SUCCESSRateID = dtrow[9].ToString() == "" ? 0 : Convert.ToDouble(dtrow[9].ToString());
                    details.SUCCESSRateKH = dtrow[10].ToString() == "" ? 0 : Convert.ToDouble(dtrow[10].ToString());
                    details.SUCCESSRateMY = dtrow[11].ToString() == "" ? 0 : Convert.ToDouble(dtrow[11].ToString());
                    details.SUCCESSRateTH = dtrow[12].ToString() == "" ? 0 : Convert.ToDouble(dtrow[12].ToString());
                    details.SUCCESSRateVN = dtrow[13].ToString() == "" ? 0 : Convert.ToDouble(dtrow[13].ToString());

                    dataList.Add(details);
                }
            }

            return dataList;
        }
   public class ChartDetails1
        {
            public string date { get; set; }
            public double CN { get; set; }
            public double ID { get; set; }
            public double KH { get; set; }
            public double MY { get; set; }
            public double TH { get; set; }
            public double VN { get; set; }
            public double SUCCESSRateCN { get; set; }
            public double SUCCESSRateID { get; set; }
            public double SUCCESSRateKH { get; set; }
            public double SUCCESSRateMY { get; set; }
            public double SUCCESSRateTH { get; set; }
            public double SUCCESSRateVN { get; set; }
        }  

答案 1 :(得分:0)

您可以使用3D Stacked Column ChartColumn with rotated series.

之类的内容

答案 2 :(得分:0)

虽然这是一个老问题,但可能对其他人有帮助。 以下是您正在寻找的解决方案 1. Amcharts sample (clustered bar chart)(在示例代码中,注释 - &#34;旋转&#34;:true)