highchars,echars的学习心得

一.饼图（pie）

<script type="text/javascript">

    ajaxData = [];       

    $.ajax({

      type: "POST",

      url: "pie.do",

      async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置

      success: function(result) {

      var dataObj=eval("("+result+")");     

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

        ajaxData.push([dataObj[i].name,dataObj[i].value,dataObj[i].id]);

         }

      }

    }, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示

    $(function () {

    Highcharts.setOptions({

                 lang: {

                       printChart:"打印图表",

                       downloadJPEG: "下载JPEG 图片" , 

                       downloadPDF: "下载PDF文档"  ,

                       downloadPNG: "下载PNG 图片"  ,

                       downloadSVG: "下载SVG 矢量图" , 

                       exportButtonTitle: "导出图片" 

                 }

             });

        $('#container').highcharts({

       

            chart: {

                plotBackgroundColor: null,

                plotBorderWidth: null,

                plotShadow: false

            },

            title: {

                text: '各类资源教程汇总统计'

            },

            tooltip: {

           pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'

            },

            plotOptions: {

                pie: {

                    allowPointSelect: true,

                    cursor: 'pointer',

                    dataLabels: {

                        enabled: true,

                        color: '#000000',

                        connectorColor: '#000000',

                        format: '<b>{point.name}</b>: {point.percentage:.1f} %>'

                    }

                }

            },

            series: [{

                type: 'pie',

                name: '',

                data: ajaxData,

                events: { 

                    click: function(e) { 

                        $("#armsName").val(e.point.name);

                        document.submitForm.action="tutorialDetail.do";

                //操作标示

                $("#operate").val("create");

                document.submitForm.submit();

                    } 

                } 

            }]

        });

    });

    </script>  

    <div id="container" class="w100pre close_float" style="height:600px;width: 400px;"></div>

二.条形图（bar）

<script type="text/javascript">

    xajaxData = []; 

    yajaxData = []; 

    $.ajax({

      type: "POST",

      url: "Detail.do",

      data:{"armsName": $("#armsName").val()},

      async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置

      success: function(result) {

      var dataObj=eval("("+result+")");     

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

        xajaxData.push(dataObj[i].armName);

        yajaxData.push(dataObj[i].allotmentNum)

         }

      }

    }, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示

   

        $(function () {

            $('#container').highcharts({

                chart: {

                    type: 'bar'

                },

                title: {

                    text: $("#armsName").val()+'历年发布情况统计'

                },

                subtitle: {

                    text: 'Source: Wikipedia.org'

                },

                xAxis: {

                    categories: xajaxData,

                    title: {

                        text: null

                    }

                },

                yAxis: {

                    min: 0,

                    title: {

                        text: '教程数量',

                        align: 'high'

                    },

                    labels: {

                        overflow: 'justify'

                    }

                },

                tooltip: {

                    valueSuffix: '篇'

                },

                plotOptions: {

                    bar: {

                        dataLabels: {

                            enabled: true

                        }

                    }

                },

                legend: {

                    layout: 'vertical',

                    align: 'right',

                    verticalAlign: 'top',

                    x: -40,

                    y: 100,

                    floating: true,

                    borderWidth: 1,

                    backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),

                    shadow: true

                },

                credits: {

                    enabled: false

                },

                series: [{

                    name:$("#armsName").val(),

                    data: yajaxData

                }]

            });

       

        });

        function changeDetail(id){

                var series=new Array();

                     var chartData=new Array();

                     var xData=new Array();

                     var dateHtml="";

        $.ajax({

             type: "POST",

             url: "changeDetail.do",

             data:{"id": id},

             async: false, //表示同步，如果要得到ajax处理完后台数据后的返回值，最好这样设置

             success: function(result) {

              var dataObj=eval("("+result+")");  

             if(null!=dataObj&&dataObj.length>0){

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

                xData.push(dataObj[i].armName);

                chartData.push(dataObj[i].allotmentNum)

                }

                var selectIndex = document.getElementById("armType").selectedIndex;//获得是第几个被选中了

                var selectText = document.getElementById("armType").options[selectIndex].text //获得被选中的项目的文本

                    series.push(new SeriesObj(selectText,chartData));

                    transverseBarChart('container',selectText+'历年发布情况统计','',xData,'','篇',series);

             }else{

             $("#container").html("<h2 style='text-align:center;'>无数据展示!</h2>");

             }

             }

           }, false);  //false表示“遮罩”，前台不显示“请稍后”进度提示

        }

        function SeriesObj(name,data){

            this.name=name;

            this.data=data;

        }

    </script>  

    <div id="container" class="w100pre close_float" style="height:600px;width: 600px" ></div>

三.transverseBarChart动态值封装（写在tools.js中即可）

/**

 * 横向 柱状图

 */

function transverseBarChart(divId,titleData,subtitleData,xAxisData,yAxisData,tooltipValueSuffix,seriesData){

// 判断是否字符串

$('#'+divId).highcharts({

chart: {

type: 'bar'

},

title: {

text: titleData

},

subtitle: {

text: subtitleData

},

xAxis: {

categories: xAxisData

},

yAxis: {

title: {

text: yAxisData

}

},

tooltip: {

shared: true,

valueSuffix: tooltipValueSuffix

},

plotOptions: {

line: {

dataLabels: {

enabled: true

},

enableMouseTracking: true

}

},

legend: {

layout: 'vertical',

align: 'right',

verticalAlign: 'top',

x: -40,

y: 100,

floating: true,

borderWidth: 1,

backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),

shadow: true

},

credits: {

enabled: false

},

series: seriesData

});

}

转载于:https://my.oschina.net/u/2001370/blog/646825