Question

我想知道我必须包含哪些代码才能使每个条形图都可点击。当用户在图表上选择一个条形时，它将显示在每个条形图中指定的自己的x轴标签名称。

我希望我的图表也可以滚动。每当我输入这行代码时： multiRenderer.setClickEnabled（真）;

我的整个图表不再可滚动，也无法缩放。

谢谢。

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>

如何使每个栏可点击（AChartEngine）

1 个答案: