jQuery教程 兼容IE6的图表插件Highcharts
沉沙 2018-09-20 来源 : 阅读 1266 评论 0

摘要:本篇教程介绍了jQuery教程 兼容IE6的图表插件Highcharts,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

本篇教程介绍了jQuery教程 兼容IE6的图表插件Highcharts,希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。

<

在网页中有时候需要画出统计图,尤其是一些OA系统中,这样能够给各位看官一个直观的数据显示。图表用很多东西都能画出来,比如JSP可以利用JAVA本身就有的绘图函数,php有jpgraph插件,等等,但毕竟属于现实层的内容,还是用前端插件更好一点。网上的JavaScript/jQuery图标插件到处东西,但是试过JS
 charts还是觉得Highcharts图表插件最好。因为它兼容IE6。其它不兼容IE6的东西太先进,在这里你是吃不消的。不符合国情。


一、基本目标
在网页中根据数据,画出如下的常见的图表折线图、饼状图、柱状图。鼠标悬停到点上显示数据。


这东西在IETest的IE6模式认证通过。




二、基本思想
这东西之所以好,是因为它在IE6、IE7中使用了旧式的VML画图,这东西曾经在诺基亚等塞班超级蛋疼的手机浏览器中取得成功,因此兼容IE6还是杠杠的。写这个插件的人只能感叹,果真大神也。


以下是其兼容性,同时这东西除了配搭JQuery,还可以配搭其它JavaScript框架。



同时,这东西能画出图很有很多,具体可以去Highcharts中文网慢慢玩//www.hcharts.cn/demo/index.php(点击打开链接)。




三、基本准备
1、首先你使用Highcharts首先要下载,打开他的官网//www.highcharts.com/(点击打开链接),如下图下载。这东西有点大28.0M,但其实用到的内容不多。


2、下载解压Highcharts-4.1.4.rar,得到如下的文件夹,拿走js/highcharts.js如果还需要图表导出功能,则再拿走js/modules/exporting.js,不开放导出功能,则不要拿了。免得又要自己写个下载网页同时汉化这个图片导出功能烦。用户要下载,让他们自己截图去。其余很多JS如果需要慢慢研究,提供一些3D等炫死人的特效,为了避免没有这么卡,画几个常见的图表,如折线图、饼状图、柱状图就可以了。


3、最后附上一个jquery-1.11.1.js就可以开始工作了。目录结构如下,将于index.html这个网页中画图:




四、制作过程
1、首先是一个简单的HTML布局,设置几个div,就是为了放图表的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>highcharts</title>
    </head>
    <body>
        <div id="line"></div>
        <div id="pie" style="width:350px;height:300px;float:left;"></div>
        <div id="column" style="width:550px;height:300px;float:left;"></div>
        <div style="clear:both;">
        </div>
    </body>
</html>2、只是就是核心的JavaScript脚本,上面的Highcharts中文网还提供了很多皮肤模板,只需要改两改就可以了。这里是其中一种:
 //首先是Highcharts的皮肤
    Highcharts.theme = {
        chart: {
            backgroundColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 1,
                    y2: 1
                },
                //图表背景颜色在这里改,0是前渐变色,1是后渐变色
                stops: [[0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)']]
            },
            //图表的边框在这里改
            borderWidth: 2,
            //这里是边框的颜色
            plotBackgroundColor: 'rgba(255, 255, 255, .9)',
            plotShadow: true,
            plotBorderWidth: 1
        },
        //标题颜色
        title: {
            style: {
                color: '#000',
                font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
            }
        },
        
        xAxis: {
            gridLineWidth: 1,
            lineColor: '#000',
            tickColor: '#000',
            labels: {
                style: {
                    color: '#000',
                    font: '11px Trebuchet MS, Verdana, sans-serif'
                }
            },
            title: {
                style: {
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '12px',
                    fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                
                }
            }
        },
        yAxis: {
            minorTickInterval: 'auto',
            lineColor: '#000',
            lineWidth: 1,
            tickWidth: 1,
            tickColor: '#000',
            labels: {
                style: {
                    color: '#000',
                    font: '11px Trebuchet MS, Verdana, sans-serif'
                }
            },
            title: {
                style: {
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '12px',
                    fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                }
            }
        }
    };
    
    // 应用皮肤
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme);3、之后再是正式为三个div画图。X轴就是xAxis属性,Y轴的数据在Serize的Data里面,而不是yAxis这是值得注意的地方。同时,注意饼状图的画法与它们的图表是不同的。
    
    $(function(){
        $('#line').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                //图表标题在这里改
                text: '气温'
            },
            xAxis: {
                categories: ["1日", "2日", "3日", "4日", "5日", "6日"]
            },
            yAxis: {
                //不允许出现小数
                allowDecimals: false,
                //最小值为0
                min: 0,
                title: {
                    text: ''
                }
            },
            //没有图例
            legend: {
                enabled: false
            },
            series: [{
                name: '气温',
                data: [10, 2, 30, 28, 21, 25]
            }]
        });
        
        $('#pie').highcharts({
            chart: {
                //饼状图,图表的大小在这里改
                type: 'pie',
                width: 350,
                height: 300
            },
            title: {
                text: '获胜比率'
            },
            //没有图例
            legend: {
                enabled: false
            },
            series: [{
                //这是鼠标悬停时的颜色
                name: '获胜比率',
                //自定义颜色
                data: [{
                    name: '胜',
                    color: "#ff0000",
                    y: 3
                }, {
                    name: '平',
                    color: "#00ff00",
                    y: 1
                }, {
                    name: '负',
                    color: "#0000ff",
                    y: 2
                }]
            }]
        });
        
        //以下是柱状图,同理
        
        $('#column').highcharts({
            chart: {
                height: 330,
                width: 550,
                type: 'column'
            },
            title: {
                text: '气温'
            },
            xAxis: {
                categories: ["1日", "2日", "3日", "4日", "5日"]
            },
            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: ''
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: '气温',
                data: [{
                    color: "#ff0000",
                    y: 13
                }, {
                    color: "#00ff00",
                    y: 21
                }, {
                    color: "#0000ff",
                    y: 23
                }, {
                    color: "#003300",
                    y: 14
                }, {
                    color: "#000033",
                    y: 25
                }]
            }]
        });
    });

五、总结
因此,整个index.html如下,实际中X轴与Y轴的数据,可以通过服务器语言aspx,jsp,php构造,同时某些人出现IE6与IE7无法画图的兼容性问题,请注意你整个JavaScript是否出现一些数组是以逗号结尾的,犯了《【JavaScript】数组定义末尾请不要留下逗号》(点击打开链接)的二义性数组错误。这里的Highcharts数组很长,混合服务器语言很容易犯这个错误的。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "//www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>highcharts</title>
    </head>
    <body>
        <div id="line"></div>
        <div id="pie" style="width:350px;height:300px;float:left;"></div>
        <div id="column" style="width:550px;height:300px;float:left;"></div>
        <div style="clear:both;">
        </div>
    </body>
</html>
<script type="text/javascript" src="Highcharts-4.1.4/jquery-1.11.1.js"></script>
<script type="text/javascript" src="Highcharts-4.1.4/highcharts.js"></script>
<script>
 //首先是Highcharts的皮肤
    Highcharts.theme = {
        chart: {
            backgroundColor: {
                linearGradient: {
                    x1: 0,
                    y1: 0,
                    x2: 1,
                    y2: 1
                },
                //图表背景颜色在这里改,0是前渐变色,1是后渐变色
                stops: [[0, 'rgb(255, 255, 255)'], [1, 'rgb(240, 240, 255)']]
            },
            //图表的边框在这里改
            borderWidth: 2,
            //这里是边框的颜色
            plotBackgroundColor: 'rgba(255, 255, 255, .9)',
            plotShadow: true,
            plotBorderWidth: 1
        },
        //标题颜色
        title: {
            style: {
                color: '#000',
                font: 'bold 16px "Trebuchet MS", Verdana, sans-serif'
            }
        },
        
        xAxis: {
            gridLineWidth: 1,
            lineColor: '#000',
            tickColor: '#000',
            labels: {
                style: {
                    color: '#000',
                    font: '11px Trebuchet MS, Verdana, sans-serif'
                }
            },
            title: {
                style: {
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '12px',
                    fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                
                }
            }
        },
        yAxis: {
            minorTickInterval: 'auto',
            lineColor: '#000',
            lineWidth: 1,
            tickWidth: 1,
            tickColor: '#000',
            labels: {
                style: {
                    color: '#000',
                    font: '11px Trebuchet MS, Verdana, sans-serif'
                }
            },
            title: {
                style: {
                    color: '#333',
                    fontWeight: 'bold',
                    fontSize: '12px',
                    fontFamily: 'Trebuchet MS, Verdana, sans-serif'
                }
            }
        }
    };
    
    // 应用皮肤
    var highchartsOptions = Highcharts.setOptions(Highcharts.theme);
    
    $(function(){
        $('#line').highcharts({
            chart: {
                type: 'line'
            },
            title: {
                //图表标题在这里改
                text: '气温'
            },
            xAxis: {
                categories: ["1日", "2日", "3日", "4日", "5日", "6日"]
            },
            yAxis: {
                //不允许出现小数
                allowDecimals: false,
                //最小值为0
                min: 0,
                title: {
                    text: ''
                }
            },
            //没有图例
            legend: {
                enabled: false
            },
            series: [{
                name: '气温',
                data: [10, 2, 30, 28, 21, 25]
            }]
        });
        
        $('#pie').highcharts({
            chart: {
                //饼状图,图表的大小在这里改
                type: 'pie',
                width: 350,
                height: 300
            },
            title: {
                text: '获胜比率'
            },
            //没有图例
            legend: {
                enabled: false
            },
            series: [{
                //这是鼠标悬停时的颜色
                name: '获胜比率',
                //自定义颜色
                data: [{
                    name: '胜',
                    color: "#ff0000",
                    y: 3
                }, {
                    name: '平',
                    color: "#00ff00",
                    y: 1
                }, {
                    name: '负',
                    color: "#0000ff",
                    y: 2
                }]
            }]
        });
        
        //以下是柱状图,同理
        
        $('#column').highcharts({
            chart: {
                height: 330,
                width: 550,
                type: 'column'
            },
            title: {
                text: '气温'
            },
            xAxis: {
                categories: ["1日", "2日", "3日", "4日", "5日"]
            },
            yAxis: {
                allowDecimals: false,
                min: 0,
                title: {
                    text: ''
                }
            },
            legend: {
                enabled: false
            },
            series: [{
                name: '气温',
                data: [{
                    color: "#ff0000",
                    y: 13
                }, {
                    color: "#00ff00",
                    y: 21
                }, {
                    color: "#0000ff",
                    y: 23
                }, {
                    color: "#003300",
                    y: 14
                }, {
                    color: "#000033",
                    y: 25
                }]
            }]
        });
    });
</script>
   

本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端jQuery频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程