Переключить линию тренда в AmCharts

Есть ли способ переключить линию тренда (скрыть/показать одним щелчком мыши) в Amcharts с помощью легенды или любой другой кнопки.

Пожалуйста, помогите, если кто сталкивался с такой ситуацией.
Заранее спасибо.


person Sachin Verma    schedule 26.12.2013    source источник


Ответы (3)


Это старый пост, но предыдущий ответ вводит в заблуждение, поэтому может запутать любого, кто смотрит на это.

В Amcharts вы можете добавить линию тренда в качестве еще одного графика — для нее просто нужно предоставить данные, как и для других ваших графиков. Это появится в легенде, так что вы можете включить / выключить его.

person user2301506    schedule 19.10.2014

Нет способа скрыть/показать линии тренда. Таким образом, единственный способ сделать это — удалить линию тренда из массива, проверить данные, а затем добавить их снова, когда это необходимо.

person zeroin    schedule 27.12.2013

введите описание изображения здесьПередача данных на AM-диаграммы в линейных диаграммах с использованием базы данных в Asp.net и C#. Вот код, который у меня сработал

 <script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/serial.js"></script>
<script src="https://www.amcharts.com/lib/3/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();
            $.ajax({
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json',
                url: 'sampleLine.aspx/GetDataonload',
                data: {},
                success:
                    function (response) {

                        drawVisualization(response.d);
                    }
            });
            function drawVisualization(dataValues) {
                for (var i = 0; i < dataValues.length; i++) {
                    var dataitem = dataValues[i];
                    var date = dataitem.date;

                    var cpa = dataitem.cpacount;
                    //alert(cpa);
                    var cpi = dataitem.cpicount;
                    var cpm = dataitem.cpmcount;
                    chartDataResults.push({
                        date: date,
                        cpacount: cpa,
                        cpicount: cpi,
                        cpmcount: cpm
                    });
                    var chart = AmCharts.makeChart("chartdiv", {
                        "type": "serial",
                        "theme": "light",
                        "marginRight": 30,
                        "legend": {
                            "equalWidths": false,
                            "periodValueText": "total: [[value.sum]]",
                            "position": "top",
                            "valueAlign": "left",
                            "valueWidth": 100
                        },
                        "dataProvider":chartDataResults,
                        //"dataProvider": [{
                        //    "year": 1994,
                        //    "cars": 1587,
                        //    "motorcycles": 650,
                        //    "bicycles": 121
                        //}],
                        "valueAxes": [{
                            "stackType": "regular",
                            "gridAlpha": 0.07,
                            "position": "left",
                            "title": "Traffic incidents"
                        }],
                        "graphs": [{
                            "balloonText": "<img src='images/icons-02.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
                            "fillAlphas": 0.6,
                            "hidden": true,
                            "lineAlpha": 0.4,
                            "title": "CPA Count",
                            "valueField": "cpacount"
                        }, {
                            "balloonText": "<img src='images/icons-03.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
                            "fillAlphas": 0.6,
                            "lineAlpha": 0.4,
                            "title": "CPI Count",
                            "valueField": "cpicount"
                        }, {
                            "balloonText": "<img src='images/icons-04.jpg' style='vertical-align:bottom; margin-right: 10px; width:28px; height:21px;'><span style='font-size:14px; color:#000000;'><b>[[value]]</b></span>",
                            "fillAlphas": 0.6,
                            "lineAlpha": 0.4,
                            "title": "CPM Count",
                            "valueField": "cpmcount"
                        }],
                        "plotAreaBorderAlpha": 0,
                        "marginTop": 10,
                        "marginLeft": 0,
                        "marginBottom": 0,
                        "chartScrollbar": {},
                        "chartCursor": {
                            "cursorAlpha": 0
                        },
                        "categoryField": "date",
                        "categoryAxis": {
                            "startOnAxis": true,
                            "axisColor": "#DADADA",
                            "gridAlpha": 0.07,
                            "title": "Year",
                            "guides": [{
                                category: "2001",
                                toCategory: "2016",
                                lineColor: "#CC0000",
                                lineAlpha: 1,
                                fillAlpha: 0.2,
                                fillColor: "#CC0000",
                                dashLength: 2,
                                inside: true,
                                labelRotation: 90,
                                label: "Increased Count"
                            }, {
                                category: "2016",
                                lineColor: "#CC0000",
                                lineAlpha: 1,
                                dashLength: 2,
                                inside: true,
                                labelRotation: 90,
                                label: "Count"
                            }]
                        },
                        "export": {
                            "enabled": true
                        }
                    });
                }
            }
        });
    </script>
C# Code
        public static List<ChartDetails> GetDataonload()
        {
            string Constring = System.Configuration.ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString.ToString();
            using (SqlConnection con = new SqlConnection(Constring))
            {

                List<ChartDetails> dataList = new List<ChartDetails>();
                SqlCommand cmd = new SqlCommand("Usp_TotalcountCPA_new_usingfunction", con);
                cmd.CommandTimeout = 50;
                cmd.CommandType = CommandType.StoredProcedure;
                cmd.Parameters.AddWithValue("@iAdvertiserid", "1000120");
                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)
                {
                    ChartDetails details = new ChartDetails();
                    string date = dtrow[4].ToString();
                    details.date = date.Substring(3, 7);
                    details.cpacount = dtrow[7].ToString();
                    details.cpicount = dtrow[10].ToString();
                    details.cpmcount = dtrow[14].ToString();
                    details.cvpcount = dtrow[16].ToString();
                    dataList.Add(details);


                }
                return dataList;
            }
        }
        public class ChartDetails
        {
            public string date { get; set; }
            public string cpacount { get; set; }
            public string cpicount { get; set; }
            public string cpmcount { get; set; }
            public string cvpcount { get; set; }
            // public string CountryCode { get; set; }
        }[![enter image description here][1]][1]

  [1]: http://i.stack.imgur.com/CvInC.png
person pavan kumar    schedule 29.04.2016