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

時間 2019-11-08

原文原文鏈接

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

　　以上是Highcharts中文網上的簡介！php

　　若是論語法的簡單性，或者須要畫功能簡單的折線、柱狀以及餅狀圖，Highcharts是遠遠不如js圖標庫——js charts 的，可是若是涉及到複雜多樣的功能特性，Highcharts甩了js charts何止8條街！css

　　這類的Js框架一般很容易學習。下載了包後，看例子就能夠了，不過Highcharts在這點上作的是很是好！　html

　　見：java

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

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

　　學習highcharts無需按照包下的examples例子一個個去試（我學js charts就是這麼作的 !- -），api

　　經過中文網提供的這3個頁面，一個小時你就能夠初步掌握這項技術！數組

　 Highcharts中文教程框架

　　Highcharts API文檔

　　Highcharts 在線演示平臺

　學習的重點就是這個在線演示平臺啦，它包含了下載包中的全部示例文件。並且能夠點擊頁面中間的這個「編輯代碼」能夠跳轉到一個「在線測試平臺」的地方，像這裏http://www.hcharts.cn/test/index.php?from=demo&p=10

　在線演示平臺作的也很是詳細，不過不少版塊還在完善中。。。

　　highcharts學習的入口是什麼呢，就是官網的這個圖啦（這裏從官網拿下來）：

　　這裏是一個圖表的全部屬性。一目瞭然。

這裏是官網上的一個簡單的圖表示例：

這個示例是由下面的代碼直接生成的。我簡單註釋了一下。代碼位於Highlchar-4.0.3下，\Highcharts-4.0.3\examples\line-labels\index.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 謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。