2. 程式人生 > >【jQuery】相容IE6的圖表外掛Highcharts

【jQuery】相容IE6的圖表外掛Highcharts

阿新 • • 發佈：2019-02-05

在網頁中有時候需要畫出統計圖，尤其是一些OA系統中，這樣能夠給各位看官一個直觀的資料顯示。圖表用很多東西都能畫出來，比如JSP可以利用JAVA本身就有的繪圖函式，php有jpgraph外掛，具體請看《【php】使用jpgraph完成投票系統的普通使用者部分》（點選開啟連結），等等，但畢竟屬於現實層的內容，還是用前端外掛更好一點。網上的JavaScript/jQuery圖示外掛到處東西，但是試過JS charts還是覺得Highcharts圖表外掛最好。因為它相容IE6。其它不相容IE6的東西太先進，在這裡你是吃不消的。不符合國情。

一、基本目標

在網頁中根據資料，畫出如下的常見的圖表折線圖、餅狀圖、柱狀圖。滑鼠懸停到點上顯示資料。


這東西在IETest的IE6模式認證通過。


二、基本思想

這東西之所以好，是因為它在IE6、IE7中使用了舊式的VML畫圖，這東西曾經在諾基亞等塞班超級蛋疼的手機瀏覽器中取得成功，因此相容IE6還是槓槓的。寫這個外掛的人只能感嘆，果真大神也。


以下是其相容性，同時這東西除了配搭JQuery，還可以配搭其它JavaScript框架。


同時，這東西能畫出圖很有很多，具體可以去Highcharts中文網慢慢玩http://www.hcharts.cn/demo/index.php（點選開啟連結）。


三、基本準備

1、首先你使用Highcharts首先要下載，開啟他的官網http://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這個網頁中畫圖：


4、此時，還要開啟一下highcharts.js，這個檔案，搜尋“credit”一項，把enable改成0，其中的text與href內容去掉，則可以去掉右下角highcharts的圖表，雖然這樣不太好。


四、製作過程

1、首先是一個簡單的HTML佈局，設定幾個div，就是為了放圖表的。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://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" "http://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>


相關推薦

【jQuery】相容IE6的圖表外掛Highcharts

在網頁中有時候需要畫出統計圖，尤其是一些OA系統中，這樣能夠給各位看官一個直觀的資料顯示。圖表用很多東西都能畫出來，比如JSP可以利用JAVA本身就有的繪圖函式，php有jpgraph外掛，具體請看《【php】使用jpgraph完成投票系統的普通使用者部分》（點選開啟連結）

【JavaScript】相容IE6的JS模板化

所謂的JS模板化並不是什麼遙遠的東西，在Ajax運用越來越多的今天，這基本都快成為了一種基本訴求了。這東西離前端工程師們並不遙遠，舉個例子。 如下的一個簡單不能再簡單的效果，這個a=2，其中這個2的資料來自於Ajax返回。至於不知道什麼是Ajax的同學，可以參考《【Serv

【jQueryUI】相容IE6的前端框架jQueryUI的Helloworld，對話面板，修改其所有元件的字型大小

jQueryUI與ExtJs是非常出名的UI，這兩個UI還有更大的一個好處就是相容IE6。雖然jQueryUI一直被人說醜，但是，一直是最受歡迎的前端框架之一。 雖然一個網站全部都用jQueryUI佈局很少，但是或多或少會用到裡面一些實用的元件的。 jQueryUI的下載，

【JQuery】右鍵選單外掛——contextmenu

右鍵選單外掛可以繫結頁面中的任意元素，繫結後，選中元素，點選右鍵，便通過該外掛彈出一個快捷選單，點選選單各項名稱執行相應操作，呼叫程式碼如下： $(selector).contextMenu(menu

【jQuery】圖片燈箱外掛——lightBox

該外掛可以用圓角的方式展示選擇中的圖片，使用按鈕檢視上下張圖片，在載入圖片時自帶進度條，還能以自動播放的方式瀏覽圖片，呼叫格式如下： $(linkimage).lightBox({options}) 其中linkimage引數為包含圖片的<a>元素名稱，o

【jQuery】拖曳外掛——draggable

拖曳外掛draggable的功能是拖動被繫結的元素，當這個jQuery UI外掛與元素繫結後，可以通過呼叫draggable()方法，實現各種拖曳元素的效果，呼叫格式如下： $(selector). draggable({options}) options引數為方法

【Jquery】jQuery獲取URL參數的兩種方法

ont ras mil scrip line 兩種方法 lower quest request jQuery獲取URL參數的關鍵是獲取到URL，然後對URL進行過濾處理，取出參數。 location.href是取得URL。location.search是取得URL“？

【jQuery】動畫小練習

current href slow alt cart () chan move == 1.jQuery部分代碼如下 <script type="text/javascript"> $(function(){ var page = 1; var

【jQuery】結合accordion插件分析寫插件的方法及註意事項

als 參數 啟動 trigger 默認值 cto global efi each 1.jQuery插件的命名方式：jquery.[插件名].js 2.對象方法附加在jQuery.fn上，全局函數附加在jQuery對象本身上 3.插件內部this指向的是通過選擇器獲取的jQ

【jQuery】cookie插件

tostring options pat ret path spa prototype 直觀 emp 通過該插件的學習使我對cookie、Date()、getDate()、setDate()、toUTCString()有了更直觀的了解，具體分析見註釋： function(k

【jQuery】利用jQuery實現“記住我”的功能

jquer sms sep jquery實現 .com script lis put bar 【1】先下載jQuery.cookie插件：使用幫助請參考鏈接(https://github.com/carhartl/jquery-cookie)。 【2】安裝插件：

【jQuery】jQ處理xml文件和xml字符串

文本 技術 字符串 處理 兼容 child nodevalue url att 1.xml文件 <?xml version="1.0" encoding="utf-8" ?> <root> <book id="1">

【jQuery】jquery插件封裝

been methods 存在 arr 追加 20px blue init方法 asn 擴展jQuery插件開發的基本知識，最佳做法和常見的陷阱。 入門 編寫一個jQuery插件開始於給jQuery.fn加入??新的功能屬性，此處添加的對象屬性的名稱就是你插件的名稱：

【jQuery】方法和選擇器的雙重使用詳解

節點 使用詳解 選擇器 query 除了 nbsp clas pos ren 1.jQuery選擇直接子節點+除了某個元素 　　1》方法 $(".begon").children(".row:not(.moreDetail)") 　　2》選擇器 $(".begon

【JQuery】使用JQuery 合並兩個 json 對象

table true ble nbsp 參考 jquer log con merge 一，保存object1和2合並後產生新對象，若2中有與1相同的key，默認2將會覆蓋1的值 1 var object = $.extend({}, object1, obj

【jquery】檢視全文/收起

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <st

【Ansible】Ansible控制windows外掛安裝及執行error與解決方法

一、 問：因pip版本問題無法安裝kerberos 答：安裝提示需要先安裝pip升級包         下載pip9.0.1升級包: https://pypi.python.org/packa

【SVN】【Eclipse】Eclipse安裝SVN外掛的幾種方式

Eclipse安裝SVN外掛的幾種方式 第一種：線上安裝，簡單方便 在Eclipse，【Help】【Install New Software】，點選【Add】輸入名稱以及svn外掛地址。 *注，這種方式可以離線安裝，將svn外掛zip包下載後，路徑選項選擇本地zip檔案

【JQuery】使用者名稱驗證

實現的功能：     在進行頁面重新整理的前提下，對使用者輸入使用者名稱進行驗證，並做出相應的提示！     在使用者在文字框中輸入資料的時候，文字框紅色的邊框消失；否則，紅色文字框出現！ H

【JQuery】選擇器

jQuery 的選擇器可謂之強大無比，這裡簡單地總結一下常用的元素查詢方法 基本選擇器 $("#myELement")    選擇id值等於myElement的元素，id值不能重複在文件中只能有一個id值是myElement所以得到的是唯一的元素 $("div"