如何使每個欄可點擊（AChartEngine）

Question

我想知道我必須包含哪些代碼才能使每個欄可點擊。當用戶在圖形上選擇一個條時，它將顯示它們各自中指定的自己的x軸標籤名稱。

我希望我的圖表可以滾動。每當我把這一行代碼： multiRenderer.setClickEnabled（true）;

我的整個圖形不再是可滾動的，它也不能縮放。

謝謝。

Answer 1

<div id="chartdiv" style="width:50%; height:600px;"></div> 
    <div id="income"> 
     <button onclick="myFunction()">alert</button> 
    </div> 

    <script> 
     var chart; 

     var chartData = [ 
      { 
       "year": 2005, 
       "income": 23.5, 
       "expenses": 18.1 
      }, 
      { 
       "year": 2006, 
       "income": 26.2, 
       "expenses": 22.8 
      }, 
      { 
       "year": 2007, 
       "income": 30.1, 
       "expenses": 23.9 
      }, 
      { 
       "year": 2008, 
       "income": 29.5, 
       "expenses": 25.1 
      }, 
      { 
       "year": 2009, 
       "income": 24.6, 
       "expenses": 25 
      } 
     ]; 

     AmCharts.ready(function() { 
      // SERIAL CHART 
      chart = new AmCharts.AmSerialChart(); 
      chart.dataProvider = chartData; 
      chart.categoryField = "year"; 
      chart.startDuration = 1; 
      chart.plotAreaBorderColor = "#DADADA"; 
      chart.plotAreaBorderAlpha = 1; 
      // this single line makes the chart a bar chart 
      chart.rotate = true; 

      // AXES 
      // Category 
      var categoryAxis = chart.categoryAxis; 
      categoryAxis.gridPosition = "start"; 
      categoryAxis.gridAlpha = 0.1; 
      categoryAxis.axisAlpha = 0; 

      // Value 
      var valueAxis = new AmCharts.ValueAxis(); 
      valueAxis.axisAlpha = 0; 
      valueAxis.gridAlpha = 0.1; 
      valueAxis.position = "top"; 
      chart.addValueAxis(valueAxis); 

      // GRAPHS 
      // first graph 
      var graph1 = new AmCharts.AmGraph(); 
      graph1.type = "column"; 
      graph1.title = "Income"; 
      graph1.valueField = "income"; 
      graph1.balloonText = "Income:[[value]]"; 
      graph1.lineAlpha = 0; 
      graph1.fillColors = " #ff6600"; 
      graph1.fillAlphas = 1; 
      chart.addGraph(graph1); 

      // second graph 
      var graph2 = new AmCharts.AmGraph(); 
      graph2.type = "column"; 
      graph2.title = "Expenses"; 
      graph2.valueField = "expenses"; 
      graph2.balloonText = "Expenses:[[value]]"; 
      graph2.lineAlpha = 0; 
      graph2.fillColors = "#81acd9"; 
      graph2.fillAlphas = 1; 
      chart.addGraph(graph2); 



      // LEGEND 
      var legend = new AmCharts.AmLegend(); 
      chart.addLegend(legend); 

      chart.creditsPosition = "top-right"; 


      // WRITE 
      chart.write("chartdiv"); 


     }); 

     chart.addListener("clickGraphItem", handleClick); 

    function handleClick(income) { 
     console.log(income); 

     if (income.item.category == 2009) { 
     document.getElementById("incomeData").innerHTML = 'Income in 2009:23.5'; 
     } 

     if (income.item.category == 2010) { 
     document.getElementById("incomeData").innerHTML = 'Income in 2010:26.2'; 
     } 

     if (income.item.category == 2011) { 
     document.getElementById("incomeData").innerHTML = 'Income in 2011:30.1'; 
     } 
     if(income.item.category ==2012) { 
     document.getElementById("incomeData").innerHTML= 'Income in 2012:29.5'; 
     } 
     if (income.item.category == 2013) { 
     document.getElementById("incomeData").innerHTML = 'Income in 2013:30.6'; 
     } 
     if (income.item.category == 2014) { 
     document.getElementById("incomeData").innerHTML = 'Income in 2014:34.1'; 
     } 
    } 
    function myFunction(income) { 
     alert("I am an alert box!"); 
    } 
    </script>