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

admin管理员组

文章数量:1395878

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"
}
]
    }
);

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": "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"
}
]
    }
);

• javascript
• onclick
• amcharts

Share Improve this question Follow edited May 23, 2017 at 12:10 CommunityBot 111 silver badge asked Jul 8, 2014 at 19:15 Michael DombrowskiMichael Dombrowski 9533 silver badges1010 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);
}

本文标签： onclickJavascript amcharts stacked bar chart click handlerStack Overflow