• [转载]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)的专栏

  • 相关阅读:
    【Jest】笔记二:Matchers匹配器
    【爬虫】如何用python+selenium网页爬虫
    【mysql-server】遇到的坑
    【puppeteer】前端自动化初探(一)
    强制360谷歌使用谷歌内核
    实时获取input输入框中的值
    什么是单页面
    如何更改Apache的根目录指向
    iphone上点击div会出现半透明灰色背景以及margin失效
    event.currentTarget和event.target的区别
  • 原文地址:https://www.cnblogs.com/d-17/p/4125342.html
Copyright © 2020-2023  润新知