Question

我想在点击条形图时获取图表数据。

这样当我点击蓝线时，它将返回相应的年份和月份，即2016年和5月。同样，如果我点击黄线，它将返回年和月。我尝试下面的代码，但它只工作一年，即蓝线或黄线。但是，当我尝试多年图的相同代码时，我无法得到这一年。我尝试了以下代码：

var chart = AmCharts.makeChart("chartdiv", {
            "type": "serial",
            "theme": "light",
            "chartScrollbar": {
                "graph": "g1",
                "oppositeAxis": false,
                "offset": 30,
                "scrollbarHeight": 50,
                "backgroundAlpha": 0,
                "selectedBackgroundAlpha": 0.1,
                "selectedBackgroundColor": "#888888",
                "graphFillAlpha": 0,
                "graphLineAlpha": 0.5,
                "selectedGraphFillAlpha": 0,
                "selectedGraphLineAlpha": 1,
                "autoGridCount": true,
                "color": "#AAAAAA"
            },
            "chartCursor": {
                "pan": true,
                "valueLineEnabled": true,
                "valueLineBalloonEnabled": true,
                "cursorAlpha": 0,
                "valueLineAlpha": 0.2
            },
            "categoryAxis": {
                "parseDates": true,
                "dashLength": 1,
                "minorGridEnabled": true
            },
            "legend": {
                "useGraphSettings": true,
                "position": "top"
            },
            "balloon": {
                "borderThickness": 1,
                "shadowAlpha": 0
            },
            "dataProvider": res_data,
            "categoryField": "date",
            "startDuration": 1,
            "categoryAxis": {
                "gridPosition": "start"
            },
            "graphs": [
                {
                    "balloonText": "[[date]]" + ' ' + "[[year]]" + ":[[value]]",
                    "fillAlphas": 0.8,
                    "id": "AmGraph-1",
                    "lineAlpha": 0.2,
                    "title": res[0] + ' ' + valuetext,
                    "columnWidth": 0.5,
                    "type": viewcolumn,
                    "valueField": "value"
                },
                {
                    "balloonText": "[[date]]" + ' ' + "[[year1]]" + ":[[value1]]",
                    "fillAlphas": 0.8,
                    "id": "AmGraph-2",
                    "lineAlpha": 0.2,
                    "title": res[1] + ' ' + valuetext,
                    "type": viewcolumn,
                    "valueField": "value1"
                }
            ],
            "valueAxes": [
                {
                    "id": "ValueAxis-1",
                    "title": "",
                    "axisAlpha": 0
                }
            ],
            "export": {
                "enabled": true
            },
            "listeners": [{
                    "event": "clickGraphItem",
                    "method": function (event) {
                        //console.log(event.item.dataContext.date);
                        alert(event.item.dataContext.date);

                    }
                }]
        });
    }

为此，我有以下数据集：

{result":[{"month":"Jan","year":"2016","totbooking":"0","nights":"0","comp_month":"Jan","year1":"2017","totbooking1":964,"nights1":"2685"},{"month":"Feb","year":"2016","totbooking":"0","nights":"0","comp_month":"Feb","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Mar","year":"2016","totbooking":"0","nights":"0","comp_month":"Mar","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Apr","year":"2016","totbooking":73,"nights":"154","comp_month":"Apr","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"May","year":"2016","totbooking":240,"nights":"530","comp_month":"May","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Jun","year":"2016","totbooking":232,"nights":"544","comp_month":"Jun","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Jul","year":"2016","totbooking":224,"nights":"506","comp_month":"Jul","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Aug","year":"2016","totbooking":419,"nights":"1069","comp_month":"Aug","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Sep","year":"2016","totbooking":708,"nights":"1737","comp_month":"Sep","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Oct","year":"2016","totbooking":721,"nights":"1875","comp_month":"Oct","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Nov","year":"2016","totbooking":723,"nights":"1739","comp_month":"Nov","year1":"2017","totbooking1":"0","nights1":"0"},{"month":"Dec","year":"2016","totbooking":723,"nights":"1682","comp_month":"Dec","year1":"2017","totbooking1":"0","nights1":"0"}]}

请仔细阅读附表并作出相应回应。

谢谢

Answer 1

正如我的评论中所提到的，dataContext中的clickGraphItem event属性包含原始dataProvider数组中的数组元素。如果您需要访问年份，请按名称引用它。由于您的图表描绘了他们自己年份的特定信息，因此请使用图表的ID或任何其他标识符来确定您需要访问的年份属性：

"event": "clickGraphItem",
"method": function(event) {
  if (event.graph.id == "AmGraph-1") {
    alert(event.item.dataContext.month + ' ' + event.item.dataContext.year);
  }
  else {
    alert(event.item.dataContext.month + ' ' + event.item.dataContext.year2);
  }
}

Updated fiddle

单击AM图表后无法获取图表数据

1 个答案: