onclick - Javascript amcharts stacked bar chart click handler

I need something like this javascript amCharts graph item click event I am using AmCharts.makeChart, and cannot seem to integrate that previous answer. Can someone please help in making the click handler work properly with this method of making amcharts? Any help would be greatly appreciated.

Code I'm currently using:

AmCharts.makeChart("0",
{
    "type": "serial",
    "pathToImages": "/",
"categoryField": "Not set",
"rotate": true,
"colors": [
"#45C40E",
"#E82323"
],
"startDuration": 1,
"startEffect": "easeOutSine",
"handDrawScatter": 4,
"handDrawThickness": 11,
"categoryAxis": {
"gridPosition": "start",
"position": "left",
"axisThickness": 0,
"labelFrequency": 0,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
},
"trendLines": [],
"graphs": [
{
    "balloonText": "[[title]]:[[value]]",
    "bulletField": "Not set",
    "fillAlphas": 1,
    "id": "AmGraph-1",
    "title": "Yes",
    "type": "column",
    "valueField": "column-1",
    "visibleInLegend": false
},
{
    "balloonText": "[[title]]:[[value]]",
    "fillAlphas": 1,
    "id": "AmGraph-2",
    "title": "No",
    "type": "column",
    "valueField": "column-2",
    "visibleInLegend": false
}
],
    "guides": [],
    "valueAxes": [
{
    "id": "ValueAxis-1",
    "stackType": "100%",
    "axisThickness": 0,
    "gridThickness": 0,
    "labelFrequency": 0,
    "labelsEnabled": false,
    "showFirstLabel": false,
    "showLastLabel": false,
    "tickLength": 0,
    "title": ""
}
],
    "allLabels": [],
    "balloon": {},
    "legend": {
    "useGraphSettings": true
},
    "titles": [
{
    "id": "Title-1",
    "size": 22,
    "text": ""

}
],
    "dataProvider": [
{
    "category": "category 1",
    "column-1": "53",
    "column-2": "13"
}
]
    }
);

Code I'm currently using:

AmCharts.makeChart("0",
{
    "type": "serial",
    "pathToImages": "http://cdn.amcharts./lib/3/images/",
"categoryField": "Not set",
"rotate": true,
"colors": [
"#45C40E",
"#E82323"
],
"startDuration": 1,
"startEffect": "easeOutSine",
"handDrawScatter": 4,
"handDrawThickness": 11,
"categoryAxis": {
"gridPosition": "start",
"position": "left",
"axisThickness": 0,
"labelFrequency": 0,
"showFirstLabel": false,
"showLastLabel": false,
"tickLength": 0
},
"trendLines": [],
"graphs": [
{
    "balloonText": "[[title]]:[[value]]",
    "bulletField": "Not set",
    "fillAlphas": 1,
    "id": "AmGraph-1",
    "title": "Yes",
    "type": "column",
    "valueField": "column-1",
    "visibleInLegend": false
},
{
    "balloonText": "[[title]]:[[value]]",
    "fillAlphas": 1,
    "id": "AmGraph-2",
    "title": "No",
    "type": "column",
    "valueField": "column-2",
    "visibleInLegend": false
}
],
    "guides": [],
    "valueAxes": [
{
    "id": "ValueAxis-1",
    "stackType": "100%",
    "axisThickness": 0,
    "gridThickness": 0,
    "labelFrequency": 0,
    "labelsEnabled": false,
    "showFirstLabel": false,
    "showLastLabel": false,
    "tickLength": 0,
    "title": ""
}
],
    "allLabels": [],
    "balloon": {},
    "legend": {
    "useGraphSettings": true
},
    "titles": [
{
    "id": "Title-1",
    "size": 22,
    "text": ""

}
],
    "dataProvider": [
{
    "category": "category 1",
    "column-1": "53",
    "column-2": "13"
}
]
    }
);

Share Improve this question edited May 23, 2017 at 12:10 CommunityBot 11 silver badge asked Jul 8, 2014 at 19:15 Michael Dombrowski 953 silver badges10 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 5

You must store chart in a variable and then add listener for clickGraphItem event:


var chart = AmCharts.makeChart("0", {
      "type": "serial",
      "pathToImages": "http://cdn.amcharts./lib/3/images/",
      "categoryField": "Not set",
      "rotate": true,
      "colors": [
          "#45C40E",
          "#E82323"
      ],
      "startDuration": 1,
      "startEffect": "easeOutSine",
      "handDrawScatter": 4,
      "handDrawThickness": 11,
      "categoryAxis": {
          "gridPosition": "start",
          "position": "left",
          "axisThickness": 0,
          "labelFrequency": 0,
          "showFirstLabel": false,
          "showLastLabel": false,
          "tickLength": 0
      },
      "trendLines": [],
      "graphs": [{
          "balloonText": "[[title]]:[[value]]",
          "bulletField": "Not set",
          "fillAlphas": 1,
          "id": "AmGraph-1",
          "title": "Yes",
          "type": "column",
          "valueField": "column-1",
          "visibleInLegend": false
      }, {
          "balloonText": "[[title]]:[[value]]",
          "fillAlphas": 1,
          "id": "AmGraph-2",
          "title": "No",
          "type": "column",
          "valueField": "column-2",
          "visibleInLegend": false
      }],
      "guides": [],
      "valueAxes": [{
          "id": "ValueAxis-1",
          "stackType": "100%",
          "axisThickness": 0,
          "gridThickness": 0,
          "labelFrequency": 0,
          "labelsEnabled": false,
          "showFirstLabel": false,
          "showLastLabel": false,
          "tickLength": 0,
          "title": ""
      }],
      "allLabels": [],
      "balloon": {},
      "legend": {
          "useGraphSettings": true
      },
      "titles": [{
          "id": "Title-1",
          "size": 22,
          "text": ""

      }],
      "dataProvider": [{
          "category": "category 1",
          "column-1": "53",
          "column-2": "13"
      }]
  });


chart.addListener("clickGraphItem", handleClick)

function handleClick(event){
    console.log(event);
}

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

onclick - Javascript amcharts stacked bar chart click handler - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)