jqplot统计图工具简单例子

代码

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " Default.aspx.cs "  Inherits = " 统计图._Default "   %>

< html >
< head >
     < link rel = " stylesheet "  type = " text/css "  href = " /dist/jquery.jqplot.css "   / >
     < link rel = " stylesheet "  type = " text/css "  href = " /dist/examples/examples.css "   / >

     < script language = " javascript "  type = " text/javascript "  src = " /dist/excanvas.js " >< / script>

     <!-- [ if  IE] ><! [endif] -->
     <!--  BEGIN: load jquery  -->

     < script language = " javascript "  type = " text/javascript "  src = " /dist/jquery-1.4.2.min.js " >< / script>

     <!--  END: load jquery  -->
     <!--  BEGIN: load jqplot  -->

     < script language = " javascript "  type = " text/javascript "  src = " /dist/jquery.jqplot.js " >< / script>

     < script language = " javascript "  type = " text/javascript "  src = " /dist/plugins/jqplot.logAxisRenderer.js " >< / script>

     < script language = " javascript "  type = " text/javascript "  src = " /dist/plugins/jqplot.canvasTextRenderer.js " >< / script>

     < script language = " javascript "  type = " text/javascript "  src = " /dist/plugins/jqplot.canvasAxisLabelRenderer.js " >< / script>

     < script language = " javascript "  type = " text/javascript "  src = " /dist/plugins/jqplot.canvasAxisTickRenderer.js " >< / script>

     < script language = " javascript "  type = " text/javascript "  src = " /dist/plugins/jqplot.dateAxisRenderer.js " >< / script>

     < script language = " javascript "  type = " text/javascript "  src = " /dist/plugins/jqplot.categoryAxisRenderer.js " >< / script>

     < script language = " javascript "  type = " text/javascript "  src = " /dist/plugins/jqplot.barRenderer.js " >< / script>

     < script type = " text/javascript "  language = " javascript " ><!--
         function  aa() {
            $.ajax({
                url:  " /WebForm1.aspx " ,
                cache:  false ,
                success:  function (html) {
                    alert(html);
                     return  html;

                }

            });

        }

        $(document).ready( function () {
            $.ajax({
                url:  " /WebForm1.aspx " ,
                cache:  false ,
                success:  function (html) {

                    $.jqplot.config.enablePlugins  =   true ;
                    line1  =  [ 6.5 ,  9.2 ,  14 ,  19.65 ,  26.4 ,  35 ,  51 ];
                    line2  =  [[ ' 1/1/2008 ' ,  42 ], [ ' 2/14/2008 ' ,  56 ], [ ' 3/7/2008 ' ,  39 ], [ ' 4/22/2008 ' ,  81 ]];
                    alert(html);
                     var  dd  =  eval(html)
                    alert(dd);
                     var  jsonurl  =   " /WebForm1.aspx " ;
                    plot1  =  $.jqplot( ' chart1 ' , [line1], {
                        legend: { show:  false  },
                        axes: {
                            xaxis: {
                                autoscale:  true ,
                                tickOptions: {
                                     //  formatString:'%.4f', 
                                    angle:  - 30
                                },
                                 //  tickRenderer:$.jqplot.CanvasAxisTickRenderer,
                                label:  ' Core Motor Amperage ' ,
                                labelOptions: {
                                     //  fontFamily:'Helvetica',
                                    fontSize:  ' 13pt '
                                },
                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                            },
                            yaxis: {
                                autoscale:  true ,
                                renderer: $.jqplot.LogAxisRenderer,
                                tickOptions: {
                                    formatString:  ' %.2f ' ,
                                    labelPosition:  ' middle ' ,
                                    angle:  - 30
                                },
                                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                                labelOptions: {
                                     //  fontFamily:'Helvetica',
                                    fontSize:  ' 13pt '
                                },
                                label:  ' Core Motor Voltage '
                            }
                        }
                    });

                    alert(dd);
                    plot2  =  $.jqplot( ' chart2 ' , [dd], {
                        axes: {
                            xaxis: {
                                autoscale:  true ,
                                renderer: $.jqplot.DateAxisRenderer,
                                label:  ' Incliment Occurrance ' ,
                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                tickOptions: {
                                     //  labelPosition: 'middle',
                                    angle:  15
                                }

                            },
                            yaxis: {
                                label:  ' Incliment Factor ' ,
                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                            }
                        }
                    });

                    line3  =  [[ ' Cup Holder Pinion Bob ' ,  7 ], [ ' Generic Fog Lamp Marketing Gimmick ' ,  9 ], [ ' HDTV Receiver ' ,  15 ], [ ' 8 Track Control Module ' ,  12 ], [ ' SSPFM (Sealed Sludge Pump Fourier Modulator) ' ,  3 ], [ ' Transcender/Spice Rack ' ,  6 ], [ ' Hair Spray Rear View Mirror Danger Indicator ' ,  18 ]];

                    plot3  =  $.jqplot( ' chart3 ' , [line3], {
                        series: [{ renderer: $.jqplot.BarRenderer}],
                        axes: {
                            xaxis: {
                                renderer: $.jqplot.CategoryAxisRenderer,
                                label:  ' Warranty Concern ' ,
                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
                                tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                                tickOptions: {
                                    angle:  - 30
                                }

                            },
                            yaxis: {
                                autoscale:  true ,
                                label:  ' Occurance ' ,
                                labelRenderer: $.jqplot.CanvasAxisLabelRenderer
                            }
                        }
                    });
                }
            })

        });
        
             -->
         < / script>

< / head>
< body >
     < div class = " jqplot "  id = " chart1 " >
     < / div>
     < div class = " jqplot "  id = " chart2 " >
     < / div>
     < div class = " jqplot "  id = " chart3 " >
     < / div>
< / body>
< / html>