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/

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值