HighCharts學習筆記(二)HighCharts結構及詳細配置

HighCharts結構及詳細配置：

1、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詳細配置

一、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瞭解詳細

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