IT技術互動交流平臺

Highcharts讓你的網頁上圖表畫的飛起

作者:Chandler Qian  發布日期:2014-10-10 20:39:45

 Highcharts是一款純javascript編寫的圖表庫,能夠很簡單便捷的在Web網站或Web應用中添加交互性的圖表,Highcharts目前支持直線圖、曲線圖、面積圖、柱狀圖、餅圖、散點圖等多達18種不同類型的圖表,可以滿足你對Web圖表的任何需求 !

   以上是Highcharts中文網上的簡介!

  如果論語法的簡單性,或者需要畫功能簡單的折線、柱狀以及餅狀圖,Highcharts是遠遠不如js圖標庫——js charts 的,但是如果涉及到復雜多樣的功能特性,Highcharts甩了js charts何止8條街!

  這類的Js框架通常很容易學習。下載了包后,看例子就可以了,不過Highcharts在這點上做的是非常好! 

  見:

  Highcharts中文網首頁:http://www.hcharts.cn/index.php

  Highcharts官網:http://www.highcharts.com/

  學習highcharts無需按照包下的examples例子一個個去試(我學js charts就是這么做的 !- -),

  通過中文網提供的這3個頁面,一個小時你就可以初步掌握這項技術!

    Highcharts中文教程

  Highcharts API文檔

  Highcharts 在線演示平臺

    學習的重點就是這個在線演示平臺啦,它包含了下載包中的所有示例文件。而且可以點擊qqqpqaGvq7CF4JIVVVVRoxLRQKxq8N1A9Q/Grc/uskWpDDdHR02H2dBH1vTD6f39/f/yeiw/7+fj6ft/9yHjxkHpund+hVZ8VisVAo5BEdCoVCsVi0/6ozPGQem6eHL478D4AvjvwxaLw4EkF+ymBMEQeAMUUcAMYUcQAYU8QBYEwRB4AxRRwAxhRxABhTxAFgTBEHgDFFHMC/AMmPjQU9vQpUAAAAAElFTkSuQmCC" />頁面中間的這個“編輯代碼”可以跳轉到一個“在線測試平臺”的地方,像這里http://www.hcharts.cn/test/index.php?from=demo&p=10

   在線演示平臺做的也非常詳細,不過很多版塊還在完善中。。。

  highcharts學習的入口是什么呢,就是官網的這個圖啦(這里從官網拿下來):

  這里是一個圖表的所有屬性。一目了然。

這里是官網上的一個簡單的圖表示例:

這個示例是由下面的代碼直接生成的。我簡單注釋了一下。代碼位于Highlchar-4.0.3下,Highcharts-4.0.3examplesline-labelsindex.html,直接打開即可。

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8'>
        <title>Highcharts Example</title>

        <!--值得注意的是,Highcharts運行需要兩個js文件,Highcharts.js及jQuery、MooTools 、Prototype 、
Highcharts Standalone Framework 中的一個框架文件。(抄自官網...)-->
        <script type='text/javascript' src='http://cdn.hcharts.cn/jquery/jquery-1.8.2.min.js'></script>
        <style type='text/css'>
${demo.css}
        </style>
        <script type='text/javascript'>
$(function () {
        $('#container').highcharts({
            chart: {    //圖表總體的設置
                type: 'line'    //這個默認為line即折線圖,還可以為柱狀column,不過餅狀圖不是這里設置,而是直接在series數據列上指定 type: 'pie',
            },
            title: {    //圖表標題
                text: 'Monthly Average Temperature' //標題名稱
            },
            subtitle: { //副標題
                text: 'Source: WorldClimate.com'
            },
            xAxis: {    //x軸
                categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']    //x軸數據
            },
            yAxis: {    //Y軸
                title: {
                    text: 'Temperature (?C)'    //y軸標題
                }
            },
            plotOptions: {                  //圖表標示的各種選項
                line: {                     //這里由于是折線圖,那么就是折線圖的選項
                    dataLabels: {           //數據標簽
                        enabled: true       //允許顯示數據,默認為false,不顯示具體數據
                    },
                    enableMouseTracking: false  //這個讓鼠標放到數據點的時候,不動態顯示一個小圓圈,默認為true
                }
            },
            series: [{  //這里省略了一個data數組的標示,更為方便,實際上下面的name和data都是屬于data數組元素的屬性,下面2組數據,就代表2組數據并列
                name: 'Tokyo',      //數據名
                data: [7.0, 6.9, 9.5, 14.5, 18.4, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]  //具體數據
            }, {
                name: 'London',
                data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
            }]
        });
    });


        </script>
    </head>
    <body>
<script src='../../js/highcharts.js'></script>
<script src='../../js/modules/exporting.js'></script>

<div id='container' style='min-width: 310px; height: 400px; margin: 0 auto'></div>

    </body>
</html>

  highcharts是一個簡單的js圖表框架,不建議仔細閱讀API文檔,建議根據示例和實際需求,一邊添加功能,一邊快速學習。

  PS : 經斯克迪亞提醒,才發現,這個highchars中文網跟bootstrap中文網基本基于同樣的主頁樣式,是一個今年剛畢業的學生創辦的,實在年輕有為!跟highcharts官方(http://www.highcharts.com)的關系其實不大。不過作為非營利性的網站,是很不錯了!bootstrap中文網其實也跟這個類似。個人猜測,這些中文網可能跟國外官網的關系都不大,只是國內熱心的技術人員為了技術交流而自行創立的,網站內容基本是源于官網的。

出處:http://www.cnblogs.com/zrtqsk/p/4013980.html 謝謝!

Tag標簽: 圖表   網頁  
  • 專題推薦

About IT165 - 廣告服務 - 隱私聲明 - 版權申明 - 免責條款 - 網站地圖 - 網友投稿 - 聯系方式
本站內容來自于互聯網,僅供用于網絡技術學習,學習中請遵循相關法律法規
香港最快开奖现场直播结果