zoukankan      html  css  js  c++  java

  • 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>
  • 相关阅读:
    Minimum Sum
    Prefix and Suffix
    BBuBBBlesort!
    Wanna go back home
    The Chosen One+高精度
    一元三次方程
    文本文件比对
    nginx日志文件切割
    nginx启动脚本
    nginx
  • 原文地址：https://www.cnblogs.com/aaa6818162/p/1956158.html
Copyright © 2011-2022 走看看