jquery 的柱状图，饼状图如何显示

function FormBarChart() {

            $('#chartBar').html('');

            var data = $('#tableCourse').datagrid('getData');

            var count = data.total;

            var rows = data.rows;

            var lineAll = [];

            var area = ['单选', '多选', '填空', '判断', '综合'];

            var seriesLabel = [];

            for (var i = 0; i < count; i++) {

                var line = [];

                line = [rows[i].solo_qty, rows[i].multiply_qty, rows[i].blank_qty, rows[i].judge_qty, rows[i].synthesize_qty];

                lineAll.push(line);

                seriesLabel.push({ label: rows[i].content });

            };

            plot2 = $.jqplot('chartBar', lineAll, {

                seriesDefaults: {

                    renderer: $.jqplot.BarRenderer, //使用柱状图表示

                    rendererOptions: { fillToZero: true },

                    pointLabels: { show: true },

                    shadowAngle: 135,

                    rendererOptions: {

                        //barMargin: 2   //柱状体组之间间隔

                        barPadding: 8, //设置同一分类两个柱状条之间的距离（px） 

                        barMargin: 10 //设置不同分类的两个柱状条之间的距离（px）（同一个横坐标表点上） 

                    }

                },

                title: '题库知识点题型分析', //标题  

                series: seriesLabel,

                legend: {

                    show: true,

                    placement: 'inside'

                },

                axes: {

                    xaxis: {

                        ticks: area,

                        renderer: $.jqplot.CategoryAxisRenderer //x轴绘制方式

                    },

                    yaxis: {

                        min: 0,

                        max: 20,

                        pad: 1.1, // 一个相乘因子 

                        //（数据在横（纵）轴上最大值-数据在横（纵）轴上最小值）*pad值=该轴显示的横（纵）坐标区间长度  

                        // 该轴显示的横（纵）坐标区间长度=横（纵）坐标显示的最大值-横（纵）坐标显示的最小值  

                        //如果设置了max和min的值的话，那么会优先考虑min和max设置的值 

                        tickOptions:

                        { formatString: '%d',

                            fontSize: '10pt'

                        }// 设置坐标轴上刻度值显示格式  

                    }

                }

            });

            $('#chartBar').bind('jqplotDataHighlight',

            function (ev, seriesIndex, pointIndex, data) {

                $('#info').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);

            }

        );

            $('#chartBar').bind('jqplotDataUnhighlight',

            function (ev) {

                $('#info').html('Nothing');

            }

        );

        }

        function FormPieChart() {

            var data = $('#tableCourse').datagrid('getData');

            var count = data.total;

            var rows = data.rows;

            var lineAll = [];

            var area = ['单选', '多选', '填空', '判断', '综合'];

            var seriesLabel = [];

            var solo = 0;

            var multiply = 0;

            var blank = 0;

            var judge = 0;

            var synthesize = 0;

            for (var i = 0; i < count; i++) {

                solo = Number(solo) + Number(rows[i].solo_qty);

                multiply = Number(multiply) + Number(rows[i].multiply_qty);

                blank = Number(blank) + Number(rows[i].blank_qty);

                judge = Number(judge) + Number(rows[i].judge_qty);

                synthesize = Number(synthesize) + Number(rows[i].synthesize_qty);

            };//求单选，多选那几列的总和

            var data = [['单选', solo], ['多选', multiply], ['填空', blank], ['判断', judge], ['综合', synthesize]];

            var plot1 = jQuery.jqplot('chartPie', [data],

    {

        seriesDefaults: {

            // Make this a pie chart.

            renderer: jQuery.jqplot.PieRenderer,

            rendererOptions: {

                // Put data labels on the pie slices.

                // By default, labels show the percentage of the slice.

                showDataLabels: true

            }

        },

        legend: { show: true, location: 'ne' }

    }

  );

        }

        function FormConvertBarChart() {

            $('#chartConvertBar').html('');

            var data = $('#tableCourse').datagrid('getData');

            var count = data.total;

            var rows = data.rows;

            var lineAll = [];

            var area = [];

            var seriesLabel = [

            { label: '单选' },

            { label: '多选' },

            { label: '填空' },

            { label: '判断' },

            { label: '综合' }

        ];

            var solo = [];

            var multiply = [];

            var blank = [];

            var judge = [];

            var synthesize = [];

            for (var i = 0; i < count; i++) {

                solo.push(rows[i].solo_qty);

                multiply.push(rows[i].multiply_qty);

                blank.push(rows[i].blank_qty);

                judge.push(rows[i].judge_qty);

                synthesize.push(rows[i].synthesize_qty);

                area.push(rows[i].content);

            };

            lineAll.push(solo);

            lineAll.push(multiply);

            lineAll.push(blank);

            lineAll.push(judge);

            lineAll.push(synthesize);

            plot2 = $.jqplot('chartConvertBar', lineAll, {

                seriesDefaults: {

                    renderer: $.jqplot.BarRenderer, //使用柱状图表示

                    rendererOptions: { fillToZero: true },

                    pointLabels: { show: true },

                    shadowAngle: 135,

                    rendererOptions: {

                        //barMargin: 2   //柱状体组之间间隔

                        barPadding: 8, //设置同一分类两个柱状条之间的距离（px） 

                        barMargin: 10 //设置不同分类的两个柱状条之间的距离（px）（同一个横坐标表点上） 

                    }

                },

                title: '题库知识点题型分析', //标题  

                series: seriesLabel,

                legend: {

                    show: true,

                    placement: 'inside'

                },

                axes: {

                    xaxis: {

                        ticks: area,

                        renderer: $.jqplot.CategoryAxisRenderer //x轴绘制方式

                    },

                    yaxis: {

                        min: 0,

                        max: 20,

                        pad: 1.1, // 一个相乘因子 

                        //（数据在横（纵）轴上最大值-数据在横（纵）轴上最小值）*pad值=该轴显示的横（纵）坐标区间长度  

                        // 该轴显示的横（纵）坐标区间长度=横（纵）坐标显示的最大值-横（纵）坐标显示的最小值  

                        //如果设置了max和min的值的话，那么会优先考虑min和max设置的值 

                        tickOptions:

                        { formatString: '%d',

                            fontSize: '10pt'

                        }// 设置坐标轴上刻度值显示格式  

                    }

                }

            });

            $('#chartConvertBar').bind('jqplotDataHighlight',

            function (ev, seriesIndex, pointIndex, data) {

                $('#info').html('series: ' + seriesIndex + ', point: ' + pointIndex + ', data: ' + data);

            }

        );

            $('#chartConvertBar').bind('jqplotDataUnhighlight',

            function (ev) {

                $('#info').html('Nothing');

            }

        );

        }

如果想点击查询时图形就出来，则写一个事件。  $('#tableCourse').datagrid({

                    onLoadSuccess: function (data) {

//把如上的代码复制粘贴过来

 }
}); 

在此处，运用的是jqPlot插件，jqPlot是一个非常强大的图表工具，曲线，柱状，饼图，调用方便~~
官网：http://www.jqplot.com/