javascript - 如何在 clickgraphitem 上获取 amchart 堆积条形图的标签

Question

我想在图形点击事件上获取标签，我正在使用 amchart 堆积条。

• 例子:
  • 当我点击 bar 1 graph 1 of category 1 : 8 时，我得到了graph 1。
  • 当我点击 bar 1 graph 2 of category 1 : 5 时，我得到了graph 2。

下面是图表的链接，我也添加了我的代码:Stackbar chart .

chart.addListener("clickGraphItem", DashBoardClick); 
    function DashBoardClick(event) {
    alert(event.item.category);
}

Answer 1

假设您指的是图表的标题，您可以通过事件参数中的 graph 对象访问它，如 documentation 中所述然后访问图形的 title属性，即 event.graph.title。

var chart = AmCharts.makeChart("chartdiv",
    {
      "type": "serial",
      "categoryField": "category",
      "startDuration": 1,
      "categoryAxis": {
        "gridPosition": "start"
      },
      "trendLines": [],
      "graphs": [
        {
          "balloonText": "[[title]] of [[category]]:[[value]]",
          "fillAlphas": 1,
          "id": "AmGraph-1",
          "title": "graph 1",
          "type": "column",
          "valueField": "column-1"
        },
        {
          "balloonText": "[[title]] of [[category]]:[[value]]",
          "fillAlphas": 1,
          "id": "AmGraph-2",
          "title": "graph 2",
          "type": "column",
          "valueField": "column-2"
        }
      ],
      "guides": [],
      "valueAxes": [
        {
          "id": "ValueAxis-1",
          "stackType": "regular",
          "title": "Axis title"
        }
      ],
      "allLabels": [],
      "balloon": {},
      "legend": {
        "enabled": true,
        "useGraphSettings": true
      },
      "titles": [
        {
          "id": "Title-1",
          "size": 15,
          "text": "Chart Title"
        }
      ],
      "dataProvider": [
        {
          "category": "category 1",
          "column-1": 8,
          "column-2": 5
        },
        {
          "category": "category 2",
          "column-1": 6,
          "column-2": 7
        },
        {
          "category": "category 3",
          "column-1": 2,
          "column-2": 3
        }
      ]
    }
  );

chart.addListener('clickGraphItem', function(event) {
  alert(event.graph.title);
})

<script src="//www.amcharts.com/lib/3/amcharts.js"></script>
<script src="//www.amcharts.com/lib/3/serial.js"></script>
<script src="//www.amcharts.com/lib/3/themes/light.js"></script>

<div id="chartdiv" style="width: 100%; height: 350px;"></div>