碼上歡樂
相關內容    簡體    繁體

highcharts 圖表庫的簡單使用

本文轉載自   查看原文   2014-10-17 17:43   2254    Jquery Plugin/ Highcharts

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

兼容性

Highcharts支持目前所有的現代瀏覽器，包括IE6 +、iPhone/iPad、Android。Highcharts在標准（W3C標准）瀏覽器中使用SVG技術渲染圖形，在遺留的IE瀏覽器中使用VML技術來繪圖。

 

Highcharts是開源的，更多信息可以到官方網閱讀：

http://www.highcharts.com/  （英文）

http://www.hcharts.cn/index.php  （中文官方網）；

 

類似的圖表庫：ECharts 這個是百度團隊開源的，也是純javascript 編寫的，功能也很豐富。

 

首先看個官方簡單的demo:

本例固定鏈接：http://www.hcharts.cn/demo/index.php?p=10

Html 代碼：

 <div id="report1" style="min-width: 800px; height: 400px">
  </div>

JavaScript 部分代碼：

$(function () {
    $('#container').highcharts({
        title: {
            text: 'Monthly Average Temperature',
            x: -20 //center
        },
        subtitle: {
            text: 'Source: WorldClimate.com',
            x: -20
        },
        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun','Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        yAxis: {
            title: {
                text: 'Temperature (°C)'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: '°C'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            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]
        }]
    });
});

需要引入 jquery.js 和highcharts.js 文件

效果圖大家可以到上面那個鏈接地址去看看，這里就不貼出來了。

 

接着分析highcharts使用方法

var chart = new Highcharts.Chart(options);  //options參數必須指定展示對象ID :   chart: {renderTo:'container'}

或

$("#div").highcharts(options..)

首先設置圖表展示區域的div對象，初始化時調用 highcharts方法，options參數是個可變的數組；

options主要參數列表：

英文名 中文名 描述
lang 語言文字對象 所有Highcharts文字相關的設置
chart 圖表 圖表區、圖形區和通用圖表配置選項
colors 顏色 圖表數據列顏色配置，是一個顏色數組
credits 版權信息 Highcharts在圖表的右下方放置的版權信息及鏈
drilldown 向下鑽取 向下鑽取數據，深入到其中的具體數據
exporting 導出模塊 導出功能配置，導出即將圖表下載為圖片或打印圖表
labels 標簽 可以放置到圖表區域內任何位置的HTML標簽
legend 圖例 用不同形狀、顏色、文字等 標示不同數據列，通過點擊標示可以顯示或隱藏該數據列
loading 加載中 加載選項控制覆蓋繪圖區的加載屏的外觀和文字
navigation 導航 導出模塊按鈕和菜單配置選項組
noData 沒有數據 沒有數據時顯示的內容
pane 分塊 針對儀表圖和雷達圖專用的配置，主要設置弧度及背景色
plotOptions 數據點配置 針對不同類型圖表的配置。Highcharts所有圖表類型請看下表
series 數據列 圖表上一個或多個數據系列，比如圖表中的一條曲線，一個柱形
title 標題 包括即標題和副標題，其中副標題為非必須的
tooltip 數據點提示框 當鼠標滑過某點時，以框的形式提示改點的數據，比如該點的值，數據單位等
Axis 坐標軸 包括x軸和y軸。多個不同的數據列可共用同一個X軸或Y軸，當然，還可以有兩個X軸或Y軸，分別顯示在圖表的上下或左右。

 

 上面的demo數據列series是靜態的，一般在項目中實際使用時，數據是動態獲取的，下面演示下動態設置highcharts數據列series

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>無標題頁</title>

    <script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script src="../../Scripts/Highcharts-4.0.3/highcharts.js" type="text/javascript"></script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="report1" style="min-width: 800px; height: 400px">
        </div>
    </div>
    </form>
</body>
</html>

<script>

    $(function() {
        var mychartOptions = {
            chart: {
                type: 'line'          //指定圖表的類型，默認是折線圖（line）
            },
            title: {
                text: '年度發貼報表統計'      //指定圖表標題
            },
            subtitle: {
                text: '2014年'           
            },
            xAxis: {
                //指定x軸分組
                categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                min: 0,
                title: {
                    text: '發帖數量'      //指定y軸的標題
                }
            },
            plotOptions: {
                line: {
                    dataLabels: {
                        enabled: true
                    },
                    enableMouseTracking: true
                }
            }
　　　　};
          
                // $("#report1").highcharts(mychartOptions);
                //動態加載報表數據

        $.ajax({
                    type: 'post',
                    url: 'Report.ashx?type=1',   
                    dataType: 'json',
                    async: 'true', //異步
                    cache: 'false',
                    success: function(data) {
                        
　　　　　　　　　　　　　　//data=[{"name":"測試系統","data":[0,0,0,0,0,0,0,12,14,4,0,0]},{"name":"3G網絡論壇","data":[0,0,0,0,0,0,0,0,0,8,0,0]},　　　　　　　　　　　　　　　　　　　　{"name":"移動內部","data":[0,0,0,0,0,0,0,0,0,2,0,0]}]
　　　　　　　　　　　　　　//動態邦定
                        mychartOptions.series = data;
　　　　　　　　　　　　　　//初始化highcharts
                        var chart = $("#report1").highcharts(mychartOptions);
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {

                        $("#report1").html("<span>獲取數據失敗" + textStatus + "</span>");

                    }


                });

  });
</script>

 

還有另一種數據邦定方式：把Html里的table設置為其數據源，table格式有要求的，例如

需要引用 jquery.js ,highcharts.js,Highcharts-4.0.3/modules/data.js

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>無標題頁</title>

    <script src="../../Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>

    <script src="../../Scripts/Highcharts-4.0.3/highcharts.js" type="text/javascript"></script>

    <script src="../../Scripts/Highcharts-4.0.3/modules/data.js" type="text/javascript"></script>
<style>
    
body { 
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
background: #E6EAE9; 
} 

a { 
color: #c75f3e; 
} 

table  
{
    
width: 700px; 
padding: 0; 
 margin-right:auto;
 margin-left:auto; 
} 

caption { 
padding: 0 0 5px 0; 
width: 700px; 
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
text-align: right; 
} 

th { 
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #4f6b72; 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
border-top: 1px solid #C1DAD7; 
letter-spacing: 2px; 
text-transform: uppercase; 
text-align: left; 
padding: 6px 6px 6px 12px; 
background: #CAE8EA no-repeat; 
} 

th.nobg { 
border-top: 0; 
border-left: 0; 
border-right: 1px solid #C1DAD7; 
background: none; 
} 

td { 
border-right: 1px solid #C1DAD7; 
border-bottom: 1px solid #C1DAD7; 
background: #fff; 
font-size:11px; 
padding: 6px 6px 6px 12px; 
color: #4f6b72; 
} 


td.alt { 
background: #F5FAFA; 
color: #797268; 
} 

th.spec { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #fff no-repeat; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
} 

th.specalt { 
border-left: 1px solid #C1DAD7; 
border-top: 0; 
background: #f5fafa no-repeat; 
font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif; 
color: #797268; 


} 
</style>
</head>
<body>
    <form id="form1" runat="server">
    <span style="font-size:20px; margin-top:10px">柱狀圖</span>
    <hr />
    <div id="container" style="min-width: 700px; height: 400px">
    </div>
    
    <%--<HR style="FILTER: progid:DXImageTransform.Microsoft.Glow(color=#987cb9,strength=10)"  color=#fff SIZE=1>--%>
    <div style="margin-top:20px; font-size:20px">統計列表</div>
    <hr />
    <div id="divTable" style="position:absolute;" ></div>
   
    </form>
</body>
</html>

<script>

    $(document).ready(function() {

        $.ajax({
            type: "POST",
            dataType: "html",
            url: 'Report.ashx?type=2',
            async: false, //設為false就是同步請求
            cache: false,
            success: function(data) {
                if (data != null) {//得到返回的html，並賦值
                    $("#divTable").html(data);
                }
            }
        });
        $('#container').highcharts({
            data: {
                table: document.getElementById('reportTable')  //reportTable是table的ID
            },
            chart: {
                type: 'column'
            },
            title: {
                text: '系統論壇發帖報表'
            },
            yAxis: {
                allowDecimals: false,
                title: {
                    text: '發帖數量'
                }
            },
            tooltip: {
                formatter: function() {
                    return '<b>' + this.series.name + '</b><br/>' +
                    this.y 
                }
            }
        });
    });

</script>
View Code

效果圖：

 

以上是個人使用Highcharts 的個人總結，還有許多強大功能沒用到，有時間再慢慢研究。


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 使用Highcharts實現圖表展示 使用highcharts時圖表自適應問題 axure中使用HighCharts模板制作統計圖表 highCharts圖表入門實例 highcharts圖表插件初探 [轉]JQuery圖表插件——Highcharts JsCharts圖表的介紹和簡單使用 基於AntV圖表庫的Ant DeSign Charts圖表展示的簡單應用 highcharts的使用：從數據庫獲取數據顯示在圖上 【Openlayers3】在地圖上添加highcharts圖表
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM