1. 程式人生 > >HighCharts選項和引數詳細配置查詢表

HighCharts選項和引數詳細配置查詢表

概述:作為一款出色的互動圖表製作工具,HighCharts有著全面的選項、引數等配置資訊。為了幫助大家進一步掌握HighCharts,今天我們為大家整理了HighCharts的所有配置資訊和說明,將其製作成表,供大家查詢。

文章主要包括Highcharts的18個選項、引數設定資訊,具體有:chart、colors、credits、exporting、global、lang 、legend、loading、navigation 、pane、plotOptions、series 、subtitle、title 、tooltip 、xAxis、yAxis。你還可以進一步瞭解Highcharts的功能,檢視

HIghcharts 4深度解析

1、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方法等的回撥函式

2、colors :資料列顏色選項

主要是資料列顏色設定,比如多條線條中的每個線條顏色。

引數 描述 預設
color 用於展示圖表,折線/柱狀/餅狀等圖的顏色,陣列形式。

一組html顏色程式碼

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

說明:1、顏色程式碼為html標準,可通過DW等複製想要的程式碼

2、預設是從第一個資料列起呼叫第一個顏色程式碼,有多少個數

據列呼叫相應數量的顏色

3、當資料列大於預設顏色數量時,重複從第一個顏色看是呼叫

3、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

4、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

5、global :Highcharts.SetOptions方法呼叫

全域性選項,並不適用於每一個圖表。這些選項,如lang選項,必須設定使用Highcharts.setOptions方法。一般用不到,詳情請檢視API文件。

6、labels :HTML標籤(可放置在圖表的任意地方)

引數 描述 預設值
items 包含兩個選項html和style,分別代表html語句及樣式 iteml :{

    html : “”,

    style {
left: ’100px’,top: ’100px’}

  }

style css樣式

style:{ color : ‘#3E576F’}

7、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']

8、legend :圖例選項,即資料類標示

引數 描述 預設值
layout 顯示形式,支援水平horizontal和垂直vertical horizontal
align 對齊方式 center
backgroundColor 背景顏色 nulll
borderColor 圖例邊框顏色 #909090
borderRadius 圖例邊框角度 5
enabled 是否顯示圖例 true
floating 是否可以浮動,配合x,y屬性 false
shadow 是否顯示陰影 false
style 圖例樣式 詳見API文件

9、loading: 圖表載入選項

引數 描述 預設值
hideDuration 淡出效果持續時間,以毫秒為單位 100
labelStyle 標籤樣式,css形式 詳見API文件
showDuration 淡入效果持續時間,以毫秒為單位 100
style 圖表載入樣式 詳見API文件

10、navigation : 匯出按鈕選項,配置匯出按鈕及列印樣式等,詳見API文件。

11、pane :極性圖表和角儀表選項配置(這兩種表是在新版本2.0.1新增加的選項)

12、plotOptions :資料點選項。分不同圖表型別配置不同,下面就常用的選項及spline選項列表如下

引數 描述 預設值
enable 是否在資料點上直接顯示資料 false
allowPointSelect 是否允許使用滑鼠選中資料點 false
formatter 回撥函式,格式化資料顯示內容 formatter: function()  { return this.y; }
marker 對某個點標記,多種樣式可選

13、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

14、subtitle : 副標題選項。和title配置一樣,在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

16、tooltip :資料點提示框選項

引數 描述 預設值
enable 是否顯示提示框 true
backgroundColor 設定提示框的背景色 rgba(255, 255, 255, .85)
borderColor 提示框邊框顏色,預設自動匹配資料列的 auto
borderRadius 提示框圓角度 5
shadow 設定提示框內容樣式,如字型顏色等 color:’#333′
formatter

回撥函式,用於格式化輸出提示框的顯示內容。

返回的內容支援html標籤如:<b>, <strong>,<br/>

17、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

18、yAxis :y軸選項

      和x軸配置相同或類似。

相關推薦

HighCharts選項引數詳細配置查詢表

概述:作為一款出色的互動圖表製作工具,HighCharts有著全面的選項、引數等配置資訊。為了幫助大家進一步掌握HighCharts,今天我們為大家整理了HighCharts的所有配置資訊和說明,將其製作成表,供大家查詢。 文章主要包括Highcharts的18個選

上下文(Context)選項引數

PHP 提供了多種上下文選項和引數,可用於所有的檔案系統或資料流封裝協議。上下文(Context)由 stream_context_create() 建立。選項可通過stream_context_set_option() 設定,引數可通過 stream_con

深入詳解JVM記憶體模型與JVM引數詳細配置

深入詳解JVM記憶體模型與JVM引數詳細配置 JVM記憶體結構 堆記憶體(Heap) 方法區(Method Area) 虛擬機器棧(JVM Stack) 棧幀的含義? 棧幀的資料結構? 區域性變量表 運算元棧

springmvc.xml(註解非註解的詳細配置)

註解和非註解的一些配置說明,方便自己以後檢視! 非註解如下: <!--非註解開始 --> <!--非註解的處理器介面卡 --> <!-- 處理器介面卡的配置 所有的處理器介面卡都需要實現HandlerAdapter介面 -->

聯發科MT6167韌體編譯引數配置方法

本文介紹聯發科MT6167平臺FAQ晶片資料解決方法 MTK Modem韌體編譯和引數配置的嗎?按照網上的“ 射頻引數___MTK_固化射頻引數方法介紹_eservice.doc”之類的文件配置後,新編譯生成的韌體:資料網路連線後沒有上下行資料【無法上網】。META工具匯出資料有些與校準引數相同

rabbitmq.config詳細配置引數

rabbitmq.config詳細配置引數 詳細使用方法請點選:http://blog.csdn.net/Super_RD/article/details/70327503 Key Documentation

IntelliJ IDEA詳細配置使用教程(適用於Java開發人員)

前言 正所謂工欲善其事必先利其器,對開發人員而言若想提高編碼效率,一款高效的開發工具是必不可少的,相信看到該部落格的朋友們都已經對IntelliJ IDEA有所瞭解了,所以此處就不對IntelliJ IDEA進行介紹,而是直接闡述在實際開發中應用場景。博主使用

springmvc 專案完整示例06 日誌–log4j 引數詳細解析 log4j如何配置

Log4j由三個重要的元件構成: 日誌資訊的優先順序 日誌資訊的輸出目的地 日誌資訊的輸出格式 日誌資訊的優先順序從高到低有ERROR、WARN、 INFO、DEBUG,分別用來指定這條日誌資訊的重要程度; 日誌資訊的輸出目的地指定了日誌將列印到控制檯還是檔案中; 而輸出格式則控制了日誌資訊的顯

javaweb專案中引入struts2後web.xml的詳細配置註釋

web.xml是web應用中載入有關servlet資訊的重要配置檔案,起著初始化servlet,filter等web程式的作用。  通常,所有的MVC框架都需要Web應用載入一個核心控制器,那採取什麼方法載入這樣的核心控制器呢,servlet或filter成為了很好的選擇

Redis 主從配置引數詳解

安裝redis 下載redis wget http://download.redis.io/releases/redis-3.0.7.tar.gz 解壓redis tar -xvf redis-3.0.7.tar.gz 安裝redis cd redis-3.0.7 “有可能需要安裝g

ionic 打包ipaapk時通用的config.xml詳細配置

<?xml version="1.0" encoding="UTF-8" standalone="yes"?><widget id="com.ionicframework.idukou597806" version="0.0.1" xmlns="http:/

Kafka概念關於springboot配置Kafka引數詳解

1.基本概念 *Producer:            訊息生產者,往Topic釋出訊息 *Consumer:            訊息消費者,往Topic取訊

SpringBoot的propertiesyml兩種配置方式, 配置注入引數, 以及配置檔案讀取失效的問題

SpringBoot支援兩種配置方式,一種是properties檔案,一種是yml 首先在pom檔案中新增依賴: <dependency> <groupId>org.springframework.boot</gro

jquery ajax error函式及其引數詳細說明(轉載)

使用jquery的ajax方法向伺服器傳送請求的時候,常常需要使用到error函式進行錯誤資訊的處理,本文詳細的說明了ajax中error函式和函式中各個引數的用法。一般error函式返回的引數有三個: function(jqXHR jqXHR, String textStatus, String error

WSUS伺服器的詳細配置部署

一、WSUS 安裝要求1、硬體要求:對於多達 500 個客戶端的伺服器,建議使用以下硬體:* 1 GHz 的處理器 * 1 GB 的 RAM2、軟體要求:要使用預設選項安裝 WSUS,必須在計算機上安裝以下軟體。 * Microsoft Internet 資訊服務 (IIS)

2.1 docker 啟動容器的時候可以使用的一些選項 配置

Usage of docker: --api-enable-cors=false Enable CORS headers in the remote API # 遠端 API 中開啟 CORS 頭 -b, --bridge=""

Ubuntu16.04 安裝 CUDA、CUDNN、OpenCV 並用 Anaconda 配置 Tensorflow Caffe 詳細過程

1.配置環境 2.安裝顯示卡驅動、CUDA 和 CUDNN 在Ubuntu系統中的 System Settings -> Software & Updates -> Additional Drivers 安裝相應的顯示卡和C

web.xml 裡面的全域性引數配置在java中的讀取

  在web.xml中的配置:   <context-param>            <param-name>name1</param-name>  

不需要配置log4j , 除錯列印ibatis執行的sql語句引數

背景:如果不想通過配置log4j的方式來列印ibatis執行的sql語句和引數param,可以使用如下方法在控制檯列印sql語句和引數   public static void main(String[] args) { try { //宣告配置檔

HDP 2.2 ( Hadoop 2.6 ) 叢集的記憶體引數配置引數調優 (Yarn/MapReduce2)

近期在根據叢集上的各節點的物理機配置對叢集的記憶體引數進行調整。  因此較系統的學習了一下hadoop裡對資源調配的各元件的相關引數的含義。 作為示例的配置叢集版本是2.6, hortonworks 2.2.  首先要理解, hadoop 中 yarn 作為資源管理器,