zoukankan      html  css  js  c++  java
  • [转载]jQuery 图表插件 jqChart 使用

    jQuery 图表插件 jqChart显示效果效果非常好。支持以下几种图表:

    Area

    Bar

    Bubble

    Column

    Financial Chart - Candlestick

    Financial Chart - Stock

    Line

    Pie

    Radar Area

    Radar Line

    Radar Spline Area

    Radar Spline

    Scatter

    Spline Area

    Spline

    Stacked Column

    Stacked Bar

    可见支持的种类非常之多。在这里我们使用一下Radar Area Chart(雷达图)。使用方式如下:

    引入必要的文件,注意jQuery的js文件要放在最前面,版本不一定是1.5.1,比这个版本高也行。实际中根据示例代码修改相应的地方就行。

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="css/jquery.jqChart.css" />  
    <link rel="stylesheet" type="text/css" href="css/jquery.jqRangeSlider.css" />  
    <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.8.21.css" />  
        <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>  
        <script src="js/jquery.mousewheel.js" type="text/javascript"></script>  
        <script src="js/jquery.jqChart.min.js" type="text/javascript"></script>  
        <script src="js/jquery.jqRangeSlider.min.js" type="text/javascript"></script>  
        <!--[if IE]><script lang="javascript" type="text/javascript" src="js/excanvas.js"></script><![endif]-->  
    <title>雷达图</title>
    </head>
    
    <body>
          
    <script lang="javascript" type="text/javascript">  
        $(document).ready(function () {  
    
            var background = {  
                type: 'linearGradient',  
                x0: 0,  
                y0: 0,  
                x1: 0,  
                y1: 1,  
                colorStops: [{ offset: 0, color: '#fff' }] //图表背景颜色
            };  
    
            $('#jqChart').jqChart({  
                title: { text: 'Radar Area Chart' },  
                border: { strokeStyle: '#6ba851' },  
                background: background,  
                axes: [  
                        {  
                            type: 'categoryAngle',  
                            categories: ['性能', '外观', '价格'] 
                        },  
                        {  
                            type: 'linearRadius',  
                            renderStyle: 'polygon',  
                            lineWidth: '1',  
                            minimum : 0,      //最小数值
                            maximum : 100,  //最大数值
                            interval : 20, //刻度
    
                              
                            majorTickMarks: { visible: true }  
                        }  
                      ],  
                series: [  
                            {  
                                title : 'Series 1',  
                                type: 'radarArea',  
                                data: [99, 80, 19], //参数  
                                fillStyle: 'rgba(65,140,240,0.75)' //填充颜色 
                            } 
                        ]  
            });  
        });  
    </script> 
    <div id="jqChart" style=" 500px; height: 300px;">  
    </div>  
    </body>
    </html>

     转载自:雷霄骅(leixiaohua1020)的专栏

  • 相关阅读:
    连接H3C交换机的Console口连不上
    WIN7远程桌面连接--“发生身份验证错误。要求的函数不受支持”
    关于SSD Trim功能
    电源适配器和充电器的区别和关系
    处理win7任务栏通知区域图标异常问题
    VMware Workstation 学习笔记
    关于“找不到附属汇编 Microsoft.VC90.CRT,上一个错误是 参照的汇编没有安装在系统上。”的解决
    Win7硬盘的AHCI模式
    电脑没有网络的故障分析
    通过Performance Log确定磁盘有性能问题?
  • 原文地址:https://www.cnblogs.com/d-17/p/4125342.html
Copyright © 2011-2022 走看看