HighCharts/Highstock使用小結,使用漢化及中文幫助文檔

時間 2019-11-20

標籤 highcharts highstock 使用小結中文幫助文檔简体版

原文原文鏈接

此文檔是本人在開發過程圖形報表時使用HighCharts所遇到的問題及解決方案。最後附上有HighCharts中文幫助文檔html

HighCharts 版本：Highcharts-3.0.1 jquery

HighStock 版本：Highstock-1.3.1canvas

下載地址：http://www.highcharts.com/數組

xAxis x軸的樣式

xAxis: {服務器

categories: ['Apples', 'Bananas', 'Oranges']], //X軸數據dataide

abels: {//X軸座標值樣式函數

rotation: -30, //字體傾斜的角度工具

align: 'right', //字體傾斜的方向性能

style: { //字體樣式字體

font: 'normal 14px Verdana, sans-serif'

}

title:{

text: '單位(類型)' //X軸上的標題

}

X軸其它屬性值：

tickPixelInterval: 150,//x軸上的間隔

type: 'datetime', //定義x軸上數據類型（此處以日期爲例）

labels: { //設置X軸各分類名稱的樣式style

formatter: function() {

var vDate=new Date(this.value);

return vDate.getFullYear()+"-"+(vDate.getMonth()+1)+"-"+vDate.getDate();

} //定義x軸上數據顯示格式（此處以日期格式爲例）

align: 'center' //顯示位置

allowDecimals：true //軸上的刻度是否容許使用小數默認值爲true

若是使用到其它屬性可參照如下信息

Highcharts翻譯系列之十七：xAxis x軸的樣式（一）

http://www.2cto.com/kf/201304/200094.html

Highcharts 翻譯系列之十八：x軸樣式（二）

http://www.2cto.com/kf/201304/200096.html

yAxis y軸的樣式

Y軸選項與上述xAxis選項基本一致，請參照上面xAxis x軸的樣式

Exporting 導出

exporting :{

enabled:true

}, //隱藏打印按鈕（右上角，默認爲true）

Credits 名片

credits:{

enabled:false

}, //Credits 名片 (右下角，默認爲true。)

plotOptions數據點選項

plotOptions: { //此處主要是以柱狀圖爲例

column: {

dataLabels: {

enabled: true, //是否顯示

style: { //字體樣式

fontWeight: 'bold'

formatter: function() { //顯示信息的內容和格式（此處能夠作超連接）

return this.y+' 人';

}

若是使用到其它屬性可參照如下信息

Highcharts翻譯系列九：PlotOptions之area區域圖

http://www.2cto.com/kf/201304/200072.html

Legend：圖例選項

legend: {

align: 'right',

verticalAlign: 'top',

x: -10,

y: 100,

borderWidth: 0

}, //圖例樣式

若是使用到其它屬性可參照如下信息

Highcharts翻譯系列六：legend 圖例選項

http://www.2cto.com/kf/201304/200066.html

Color 顏色選項

此處請參照HighCharts中文幫助文檔

Title：標題選項

tooltip: {

formatter: function() { //在此處能夠自定義提示信息顯示的樣式

return '<b>'+ this.x.toLowerCase() +'： '+this.y +' 人</b> ' ;

}

若是使用到其它屬性可參照如下信息

Highcharts翻譯系列之十六：tooltip工具提示

http://blog.csdn.net/qiqingli/article/details/8725572

Lang 語言選項（英譯漢）

lang:{

printChart: '打印圖表',

downloadPNG: '下載JPEG 圖片',

downloadJPEG: '下載JPEG文檔',

downloadPDF: '下載PDF 圖片',

downloadSVG: '下載SVG 矢量圖',

contextButtonTitle: '下載圖片'

}

HighStock 頂部按鈕和時間格式漢化

（Zoom,From,To highstock.js---308行）

rangeSelector: {

buttons: [{//定義一組buttons,下標從0開始

type: 'week',

text: '1周'

},{

type: 'month',

text: '1月'

}, {

type: 'month',

text: '3月'

}, {

type: 'month',

text: '6月'

}, {

type: 'ytd',

text: '1季度'

}, {

type: 'year',

text: '1年'

}, {

type: 'all',

text: '所有'

}],

buttonTheme: {

width: 36,

height: 16,

padding: 1,

r: 0,

stroke: '#68A',

zIndex: 7

inputDateFormat: '%Y-%m-%d',

inputEditDateFormat: '%Y-%m-%d',

selected: 1//表示以上定義button的index,從0開始

語言對象。語言對象是全局的，並且不能在圖表初始化的時候設置。它必須使用Highcharts.setOptions在圖表初始化之間設置

Highcharts.setOptions({

global: {

useUTC: false

lang:{

months:[ 'Janvier', 'Fevrier', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août','Septembre', 'Octobre','Novembre', 'Decembre'],

weekdays:[ 'Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

}

});

漢化後:

Highcharts.setOptions({

global: {

useUTC: false

lang:{

months:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月','九月', '十月','十一月', '十二月'],

weekdays:['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

}

});

其餘漢化信息科參照

highcharts 頁面導出按鈕漢化

http://www.kaifajie.cn/wangyezhizuo/5628.html

Column, line and pie 三圖組合

tooltip: {

formatter: function() {

var s;

if (this.point.name) { // 當爲餅狀圖時

s = ''+

this.point.name +': <br/>總戶數 '+ this.y +' 戶';

}else {

s = ''+

+this.series.name +'('+this.x +'): '+ this.y+' 戶’;

}

return s;

positioner:null

size: 120, //Pie大小

allowPointSelect: true, //扇區是否能夠點擊

cursor: 'pointer', //鼠標的樣式

showInLegend: false, //圖例

dataLabels: {

enabled: false//是否顯示信息

}

Highcharts中文幫助文檔

Chart 圖標區選項

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方法等的回調函數。

Color 顏色選項

Color顏色選項用於設置圖表的顏色方案。

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

Highcharts已經默認提供了多種顏色方案，當要顯示的圖形多於顏色種類時，多出的圖形會自動從第一種顏色方案開始選取。自定義顏色方案的方法：

Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655',
'#FFF263', '#6AF9C4']
});

Credits 名片

參數	描述	默認值
enabled	是否啓用名片	True
href	點擊名片跳轉的連接	http://www.highchart.com
position	設置名片的位置	position: { align: 'right', x: -10, verticalAlign: 'bottom', y: -5 }
style	設置名片的樣式
text	設置名片顯示的值	"Highcharts.com"

exporting 導出

參數	描述	默認值
enabled	是否顯示導出打印的按鈕	true
url	設置點擊導出按鈕鏈接的地址，默認是官網的地址，可本身定義
filename	保存的文件名	chart
type	保存的文件類型	Image/png
buttons	設置導出或打印按鈕的樣式、事件等具體配置請看官網
width	寬度	800
enableImages	是否啓用圖像的出口。包括圖像的點標記，背景圖片等，默認爲false。應該是是否添加背景圖http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/exporting/enableimages/	false

Global 全局設置

（Google翻譯的）

全球設置並不適用於每一個圖表的選項。像lang選項，這些選項，必須設置使用Highcharts.setOptions方法。

參數	描述	默認值
canvasToolsURL	設置延遲加載的Android2.x設備的附加文件的URL。這些設備不支持SVG，因此須要下載一個幫助文件，其中包含canvg，的依賴關係rbcolor，和CanVG Renderer類。能夠本身安裝canvas-tools.js到本身的服務器上，相應地更改此選項。默認值的「http://www.highcharts.com/js/canvas-tools.js」。
useUTC	是否使用UTC時間，爲軸縮放，刻度標記的位置和時間在Highcharts.dateFormat顯示。

Title：標題選項

Title標題選項用於設置圖表的標題相關屬性。

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

Subtitle：副標題選項

副標題提供的屬性選項與標題title大體相同，可參照上述標題選項，值得一提的是副標題的text選項默認爲''，即空的，因此默認狀況下副標題不顯示。

xAxis：X軸選項

X軸選項用於設置圖表X軸相關屬性。

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

yAxis：Y軸選項

Y軸選項與上述xAxis選項基本一致，請參照上表中的參數設置，再也不單獨列出。

Series：數據列選項

數據列選項用於設置圖表中要展現的數據相關的屬性。

參數	描述	默認值
data	顯示在圖表中的數據列，能夠爲數組或者JSON格式的數據。如：data:[0, 5, 3, 5]，或 data: [{name: 'Point 1',y: 0}, {name: 'Point 2',y: 5}] 若是想對不一樣的列顯示不一樣的顏色請對該列使用color屬性,如data: [148.5, { y: 216.4,color: '#BF0B23'},54.4]	''
name	顯示數據列的名稱。	''
type	數據列類型，支持 area, areaspline, bar, column, line, pie, scatter or spline	line

plotOptions：數據點選項

plotOptions用於設置圖表中的數據點相關屬性。plotOptions根據各類圖表類型，其屬性設置略微有些差別，如下是部分選項。

參數	描述	默認值
enableMouseTracking	啓用或禁用鼠標跟蹤一個特定的列。這包括點提示和圖上點的單擊事件。對於大型數據集，它能夠提升性能。若是這個禁用了event事件將沒法執行	true
events	能夠設置對整個圖形的click事件、單擊圖例顯示和隱藏圖形,還有mouseOut、mouseOver等。具體詳細信息請看官網
point	每一個單點的屬性,該屬性下面能夠這個單個點的click、mouseOut、mouseOver、remove、select(選中是觸發)、unselect(失去選中時觸發),update(對某個點更新時觸發)
zIndex	設置圖形的zIndex值，值相對大的顯示在頂層
pointPadding	設置每列之間填充的大小，只對column和bar有效。
pointWidth	設置每列之間一個固定的寬度，只對column和bar有效。

Tooltip：數據點提示框

Tooltip用於設置當鼠標滑向數據點時顯示的提示框信息。

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

Legend：圖例選項

legend用於設置圖例相關屬性。

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

Navigation按鈕和圖例選項

參數	描述	默認值
buttonOptions	設置導出,打印按鈕的選項，如顯示的位置，樣式，是否啓用等
menuItemHoverStyle	懸停在圖例上面的樣式
menuItemStyle
mentStyle

Loading

在圖形上顯示一個loading文字,多是用於增長用戶體驗

參數	描述	默認值
hideDuration	設置loading標籤淡出的時間	100
showDuration	設置loading標籤淡入的時間	100
labelStyle	Loading標籤樣式
style	loading標籤的樣式，涵蓋了繪圖區