`

amcharts扩展支持没有数据时的展示

 
阅读更多

 

 

最近给爱美的国家做项目,涉及到报表,选用AMCharts;之前决定使用JFreeChart,但是爱美的国家说了一个字“丑”,无奈换用AMCharts,但是问题发生了,AMCharts 不支持 setNoDataMessage 只好重写AMCharts.AmPieChart的write方法,具体示例如下:
  1. 完整示例清单 :
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

    <html>

     

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

            <title>amCharts examples</title>

            <link rel="stylesheet" href="style.css" type="text/css">

            <script src="../amcharts/amcharts.js" type="text/javascript"></script>        

            <script type="text/javascript">

                var chart;

                var legend;

     

                var chartData = [{

                    country: "Lithuania",

                    value: 0

                }];

    (function($) {

    var oldHTML = AmCharts.AmPieChart.prototype.write;

    function funcDoThis(id,othis){

    var chartD = othis.dataProvider;

    var flag = false;

    for(var i =0;i<chartD.length;i++){

    flag = (eval("chartD[i]."+othis.valueField)==0?false:true)||flag;

    }

    return flag;

    }

    AmCharts.AmPieChart.prototype.write = function(id) {

    var flag = funcDoThis(id,this);

    if(flag){

    return oldHTML.apply(this,arguments);

    }else{

    document.getElementById(id).innerHTML = this.noResultText?this.noResultText:"查无数据!";

    }

    };

    })(AmCharts.AmPieChart);

                AmCharts.ready(function () {

                    // PIE CHART

                    chart = new AmCharts.AmPieChart();

                    chart.dataProvider = chartData;

                    chart.titleField = "country";

                    chart.valueField = "value";

                    chart.outlineColor = "#FFFFFF";

                    chart.outlineAlpha = 0.8;

                    chart.outlineThickness = 2;

                    // this makes the chart 3D

                    chart.depth3D = 15;

                    chart.angle = 30;

    chart.noResultText = "没有数据的时候这么办";

                    // WRITE

                    chart.write("chartdiv");

                });

            </script>

        </head>

     

        <body>

            <div id="chartdiv" style="width: 100%; height: 400px;"></div>

        </body>

     

    </html>

     

  3. 只需把红色部分拷贝到AMCharts.js最后即可;

 

 

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics