amcharts添加事件

最新推荐文章于 2025-05-18 09:10:02 发布

林楚森

最新推荐文章于 2025-05-18 09:10:02 发布

阅读量1.9k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/linchusen/article/details/82106866

博客介绍了handleClick方法，它是点击事件触发的函数，可用于实现如点击柱子跳转到二级图形等操作。还指出若测试发现图形加载不稳定，可能是“AmCharts.ready(function() {})”函数名定义有问题，可去掉该定义解决。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>amcharts</title>
</head>
<body>
<script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script>
<script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>amchars点击事件</title>
<!-- 可以实现点击跳转到另外的一个图表 -->
</head>
<body>
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
<!-- 柱形图的 -->
<!-- <script src="http://www.amcharts.com/lib/amcharts.js" type="text/javascript"></script> -->
<!-- 饼图的 -->
<script src="amcharts/amcharts.js" type="text/javascript"></script>
<script src="amcharts/pie.js" type="text/javascript"></script>
<script src="/amcharts/serial.js" type="text/javascript"></script>


<div id="chartdiv" style="width: 100%; height: 440px; background-color:#eeeeee;"></div>
<div id="chartdiv1" style="width: 100%; height: 440px; display:none; background-color:#eeeeee;" ></div>
<script type="text/javascript">
    /* 柱形图 */
    var chart;
    var chartData = [{
        country: "USA",
        visits: 4025},
    {
        country: "China",
        visits: 1882},
    {
        country: "Japan",
        visits: 1809},
    {
        country: "Germany",
        visits: 1322},
    {
        country: "UK",
        visits: 1122},
    {
        country: "France",
        visits: 1114},
    {
        country: "India",
        visits: 984},
    {
        country: "Spain",
        visits: 711},
    {
        country: "Netherlands",
        visits: 665},
    {
        country: "Russia",
        visits: 580},
    {
        country: "South Korea",
        visits: 443},
    {
        country: "Canada",
        visits: 441},
    {
        country: "Brazil",
        visits: 395},
    {
        country: "Italy",
        visits: 386},
    {
        country: "Australia",
        visits: 384},
    {
        country: "Taiwan",
        visits: 338},
    {
        country: "Poland",
        visits: 328
    }];

    /* 饼图 */
     var chart1;
   var chartData1 = [
       {
           "country": "大宝",
           "visits": 6000
       },
       {
           "country": "二宝",
           "visits": 1882
       },
       {
           "country": "三宝",
           "visits": 1809
       },
       {
           "country": "四宝",
           "visits": 1322
       },
       {
           "country": "五宝",
           "visits": 1122
       },
       {
           "country": "六宝",
           "visits": 1114
       },
       {
           "country": "七宝",
           "visits": 984
       },
       {
           "country": "八宝",
           "visits": 711
       }
   ];


    /* 柱形图点击事件的方法 */
    function handleClick(event)
    {
        alert(event.item.category + ": " + event.item.values.value);
        $("#chartdiv1").css("display","block");
        /* 饼图 */
        chart1 = new AmCharts.AmPieChart();

        chart1.addTitle("666666", 16);
        chart1.dataProvider = chartData1;
        chart1.titleField = "country";   //分类类别项
        chart1.valueField = "visits";  //比例值
        chart1.sequencedAnimation = true;
        chart1.startEffect = "elastic";
        chart1.innerRadius = "30%";
        chart1.startDuration =2;  //饼图的渲染时间，时间越长，动画越长，展示的准备时间越久
        chart1.labelRadius = 10;  //饼图上标签，值越大，饼图越小，说明的标签指示线越长
        chart1.balloonText = "[[title]]<br/><span><b>[[value]]</b> ([[percents]]%)</span>";
        chart1.depth3D = 10;  //3D效果的立体度 ，值越大立体感越强
        chart1.angle = 20;  //角度占的分额基数，值大则显示的饼图倍数就会扩大，但是值不能超过限定的最大值，否则会变小

        chart1.write("chartdiv1");

    }
    /* 饼图 */
     var chart1;
    var chartData1 = [
        {
            "country": "大宝",
            "visits": 6000
        },
        {
            "country": "二宝",
            "visits": 1882
        },
        {
            "country": "三宝",
            "visits": 1809
        },
        {
            "country": "四宝",
            "visits": 1322
        },
        {
            "country": "五宝",
            "visits": 1122
        },
        {
            "country": "六宝",
            "visits": 1114
        },
        {
            "country": "七宝",
            "visits": 984
        },
        {
            "country": "八宝",
            "visits": 711
        }
    ];

        /* 柱形图 */
        chart = new AmCharts.AmSerialChart();
        chart.dataProvider = chartData;
        chart.categoryField = "country";
        chart.startDuration = 1;
        chart.addListener("clickGraphItem", handleClick);
        var categoryAxis = chart.categoryAxis;
        categoryAxis.labelRotation = 90;
        categoryAxis.gridPosition = "start";
        var graph = new AmCharts.AmGraph();
        graph.valueField = "visits";
        graph.balloonText = "[[category]]: [[value]]";
        graph.type = "column";
        graph.lineAlpha = 0;
        graph.fillAlphas = 0.8;
        chart.addGraph(graph);
        chart.write("chartdiv");


</script>
</body>
</html>

handleClick方法就是点击事件触发的函数,可以通过这个函数做一些你想做的事,例如点击柱子跳到另一个二级图型,另外,如果你做完后测试发现图型有时加载缓慢,有时甚至没有加载,时灵时不灵的,应该是这个方法”AmCharts.ready(function() {}”,这个函数名定义有问题,如本文一样可以去掉