HighCharts 詳細使用及API文檔說明

官方在線API：http://api.highcharts.com/highcharts

中文網： http://www.hcharts.cn/

1、HighCharts開發說明：

HighCharts開發實際上配置HighCharts每一個部分，好比配置標題（title），副標題（subtitle）等，其中每一個部分又有更細的參數配置，好比標題下有對齊方式（align），標題文字（text）等。下圖爲整個圖表的每一個部分位置說明（請對照下面HighCharts總體結構）

2、HighCharts總體結構：

經過查看API文檔咱們知道HighCharts結構以下：（API文檔在文章後面提供下載）

var chart = new Highcharts.Chart({

       chart: {…}              // 配置chart圖表區

       colors: [{...}]    // 配置主體顯示顏色（多個線條和柱體的顏色順序的）

       credits: {…}     // 配置右下角版權連接

       exporting: {…}  // 配置導出及打印

       global: {…}      // Highcharts.SetOptions方法調用

       labels: {…}        // HTML標籤，能夠放置在繪圖的任何位置

       lang: {…}        // 語言對象屬性配置

       legend: {…}         // 配置圖例選項

       loading: {…}    // 配置圖表加載選項

       navigation: {…} // 配置導出按鈕屬性

       pane: {…}        // 僅適用於極性圖表和角儀表

       plotOptions: {…}          // 配置數據點選項

       series: [{...}]               // 配置數據列選項

       subtitle: {…}   // 配置副標題

       title: {…}                  // 配置標題

       tooltip: {…}               // 配置數據點提示框

    xAxis: {…}              // 配置x軸選項

       yAxis: {…}              // 配置y軸選項

})

    上面紅色部分是圖標完整性及美觀必須本身配置的選項，其餘選項無特殊須要默認就行，也就是不用配置，因此開發HighCharts是否是很簡單，只須要配置簡單的幾個選項就行，下面詳細講解每一個選項的配置。

3、HighCharts每部分詳細配置：

一、chart ：圖表區選項

              主要設置圖表的類型，圖表裝載容器名，背景，高度，寬度等圖表的總體屬性。

參數	描述	默認值
backgroundColor	設置圖表區背景色	#FFFFFF
borderWidth	設置圖表邊框寬度	0
borderRadius	設置圖表邊框圓角角度	5
renderTo	圖表放置的容器，通常在html中放置一個DIV，獲取DIV的id屬性值	null
defaultSeriesType	默認圖表類型line, spline, area, areaspline, column, bar, pie , scatter	0
width	圖表寬度，默認根據圖表容器自適應寬度	null
height	圖表高度，默認根據圖表容器自適應高度	null
margin	設置圖表與其餘元素之間的間距，數組，如[0,0,0,0]	[null]
plotBackgroundColor	主圖表區背景色，即X軸與Y軸圍成的區域的背景色	null
plotBorderColor	主圖表區邊框的顏色，即X軸與Y軸圍成的區域的邊框顏色	null
plotBorderWidth	主圖表區邊框的寬度	0
shadow	是否設置陰影，須要設置背景色backgroundColor	false
reflow	是否自使用圖表區域高度和寬度，若是沒有設置width和height時，會自適應大小	true
zoomType	拖動鼠標進行縮放，沿x軸或y軸進行縮放，能夠設置爲：‘x’,'y’,'xy’	」
events	事件回調，支持addSeries方法，click方法，load方法，selection方法等的回調函數

 

、

二、colors ：數據列顏色選項

    主要是數據列顏色設置，好比多條線條中的每一個線條顏色。

參數	描述	默認
color	用於展現圖表，折線/柱狀/餅狀等圖的顏色，數組形式。	一組html顏色代碼

        

colors: [                  '#058DC7',                  '#50B432',                  '#ED561B',                   '#DDDF00',                  '#24CBE5',                   '#64E572',                  '#FF9655',                  '#FFF263',                  '#6AF9C4'     ]

說明：一、顏色代碼爲html標準，可經過DW等複製想要的代碼 二、默認是從第一個數據列起調用第一個顏色代碼，有多少個數 據列調用相應數量的顏色 三、當數據列大於默認顏色數量時，重複從第一個顏色看是調用

 

三、credits ：版權連接選項

參數	描述	默認值
enabled	是否顯示版權及連接，布爾型，默認爲顯示	true
position	位置。可用align調整對齊方式，x，y設置距離。	position: { align: ‘right’,x: -10,          verticalAlign: ‘bottom’,y: -5 }
href	連接地址。String型，默認是highCharts官網	www.highcharts.com
style	名片CSS模式	itemStyle : { cursor: ‘pointer’,color: ‘#909090′, fontSize: ’10px’ }
text	顯示名字。	highcharts.com

 

 

四、exporting ：導出及打印選項

參數	描述	默認值
buttons	打印和導出按鈕設置。其中兩個按鈕中又有不少樣式等設置，若有須要可詳細查看API文檔	默認按鈕樣式
enableImages	在導出的圖片中添加logo水印。布爾型，默認是false	false
enabled	是否顯示按鈕（也就是啓用打印導出功能），布爾型，默認顯示	true
filename	導出圖片文件名，String型	chart
type	導出圖片的格式，有jpg和png可選，String型	jpg/png
url	轉換圖片的服務器url，默認是用highcharts服務器	http://export.highcharts.com
width	圖片大小，數字型	800

五、global ：Highcharts.SetOptions方法調用

    全局選項,並不適用於每個圖表。這些選項,如lang選項,必須設置使用Highcharts.setOptions方法。通常用不到，詳情請查看API文檔。

六、labels ：HTML標籤（可放置在圖表的任意地方）

參數	描述	默認值
items	包含兩個選項html和style，分別表明html語句及樣式	iteml :{               html : 「」,     style {             left: ’100px’,top: ’100px’}   }
style	css樣式	style:{ color : ‘#3E576F’}

七、lang ：語言配置選項，主要配置符號、導出時顯示的語句、時間顯示語言等。和上面的global參數有關，即調用Highcharts.SetOptions方法。下表列舉經常使用的選項注意：lang選項其實就是配置一些顯示語言，API中都有詳細說明。

參數	描述	默認值
decimalPoint	小數點	.
downloadJPEG	導出顯示的文字，下面還有downloadPDF等，都同樣	Download JPEG image等
months	月份，字符串數組形式	['January' 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
numericSymbols	數值單位，好比1000爲1k	['k', 'M', 'G', 'T', 'P', 'E']

八、legend ：圖例選項，即數據類標示。

參數	描述	默認值
layout	顯示形式，支持水平horizontal和垂直vertical	horizontal
align	對齊方式	center
backgroundColor	背景顏色	nulll
borderColor	圖例邊框顏色	#909090
borderRadius	圖例邊框角度	5
enabled	是否顯示圖例	true
floating	是否能夠浮動，配合x，y屬性	false
shadow	是否顯示陰影	false
style	圖例樣式	詳見API文檔

九、loading: 圖表加載選項

參數	描述	默認值
hideDuration	淡出效果持續時間，以毫秒爲單位	100
labelStyle	標籤樣式，css形式	詳見API文檔
showDuration	淡入效果持續時間，以毫秒爲單位	100
style	圖表加載樣式	詳見API文檔

十、navigation ： 導出按鈕選項，配置導出按鈕及打印樣式等，詳見API文檔。

十一、pane ：極性圖表和角儀表選項配置（這兩種表是在新版本2.0.1新增長的選項）

十二、plotOptions ：數據點選項。分不一樣圖表類型配置不一樣，下面就經常使用的選項及spline選項列表以下

參數	描述	默認值
enable	是否在數據點上直接顯示數據	false
allowPointSelect	是否容許使用鼠標選中數據點	false
formatter	回調函數，格式化數據顯示內容	formatter: function()  { return this.y; }
marker	對某個點標記，多種樣式可選

1三、series ：數據列選項

參數	描述	默認值
data	顯示在圖表中的數據列，能夠爲數組或者JSON格式的數據。如：data:[0, 5, 3, 5]，或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}]	‘’
name	數據列名稱	‘’
type	數據列類型，支持 area, areaspline, bar, column, line, pie, scatter、spline	line

1四、subtitle ： 副標題選項。和title配置同樣，在title中詳細講解

1五、title ： 標題選項

參數	描述	默認值
text	標題文本內容	Chart title
align	水平對齊方式	center
verticalAlign	垂直對齊方式	top
margin	標題與副標題之間或者主圖表區間的間距	15
floating	是否浮動，若是爲true，則標題能夠偏離主圖表區，可配合x,y屬性使用	false
style	css樣式	{ color: ‘#3E576F’,            fontSize: ’16px’}
x	按照水平對齊方式的距離	0
y	按照垂直對齊方式的距離	15

1六、tooltip ：數據點提示框選項

參數	描述	默認值
enable	是否顯示提示框	true
backgroundColor	設置提示框的背景色	rgba(255, 255, 255, .85)
borderColor	提示框邊框顏色，默認自動匹配數據列的	auto
borderRadius	提示框圓角度	5
shadow	設置提示框內容樣式，如字體顏色等	color:’#333′
formatter	回調函數，用於格式化輸出提示框的顯示內容。 返回的內容支持html標籤如：<b>, <strong>,<br/>

1七、xAxis ：x軸選項

參數	描述	默認
categories	設置X軸分類名稱，數組，例如： categories: ['Apples', 'Bananas', 'Oranges']	[]
title	X軸名稱，支持text、enabled、align、rotation、style等屬性
labels	設置X軸各分類名稱的樣式style，格式formatter，角度rotation等
max	X軸最大值(categories爲空時)，若是爲null， 則最大值會根據X軸數據自動匹配一個最大值	null
min	X軸最小值(categories爲空時)，若是爲null， 則最小值會根據X軸數據自動匹配一個最小值	null
gridLineColor	網格（豎線）顏色	#C0C0C0
gridLineWidth	網格(豎線)寬度	1
lineColor	基線顏色	#C0D0E0
lineWidth	基線寬度	0

1八、yAxis ：y軸選項

      和x軸配置相同或相似。

 

        注意：一、以上全部參數若是沒特殊要求，及爲默認是，可不用再代碼中配置

                二、API中還有更多的配置選項，可經過閱讀API瞭解詳細

                三、紅色部分爲主要配置內容
 

4、實例說明HighCharts開發步驟

一、要求

    1）繪製一個顯示本站2012/9/22日訪問統計，包括瀏覽量（pv），IP數的折線圖。

2）x軸按每小時統計，y軸顯示對應的數量

3）折線圖上x軸對應的點顯示數量，當鼠標通過改點時，用提示框形式顯相關信息

4）要有圖例顯示每條折現表明什麼數據信息

5）圖表右下角加上「我愛物聯網」字樣並連接到www.52wulian.org

6）要有主標題和副標題

7）要能實現圖表打印及導出常見格式的圖片功能

二、開發步驟

1）新建一個文件夾名爲「HighCharts」，並在該文件夾內新建一個名爲「js」的文件夾，將所需的「highcharts.js」和「exporting.js」拷貝至「js」文件夾。

<!doctype html>
<html lang="en">
<head>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/highcharts.js"></script>
  <script type="text/javascript" src="js/exporting.js"></script>
  <script>
    //左側Javascript代碼
  </script>
</head>
<body>
  <div id="container" style="min-width:700px;height:400px"></div>
</body>
</html>

$(function () {
    var aa = [1,4
                ] ;
    $('#container').highcharts({
        chart: {
            type: 'column'
        },
        title: {
            text: 'Monthly Average Rainfall'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: {
            categories: aa
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Rainfall (mm)'
            }
        },
        tooltip: {
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                '<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                pointPadding: 0.2,
                borderWidth: 0
            }
        },
        series: [{
            name: 'Times',
            data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
        
        }]
    });
});