HighCharts選項和引數詳細配置查詢表
概述:作為一款出色的互動圖表製作工具,HighCharts有著全面的選項、引數等配置資訊。為了幫助大家進一步掌握HighCharts,今天我們為大家整理了HighCharts的所有配置資訊和說明,將其製作成表,供大家查詢。
文章主要包括Highcharts的18個選項、引數設定資訊,具體有:chart、colors、credits、exporting、global、lang 、legend、loading、navigation 、pane、plotOptions、series 、subtitle、title 、tooltip 、xAxis、yAxis。你還可以進一步瞭解Highcharts的功能,檢視
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 { } |
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’, |
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 打包ipa和apk時通用的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的properties和yml兩種配置方式, 配置注入引數, 以及配置檔案讀取失效的問題
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 作為資源管理器,