HighCharts/Highstock使用小結,使用漢化及中文幫助文件
此文件是本人在開發過程圖形報表時使用HighCharts所遇到的問題及解決方案 。最後附上有HighCharts中文幫助文件
HighCharts 版本：Highcharts-3.0.1
HighStock 版本：Highstock-1.3.1
xAxis x軸的樣式
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']], //X軸資料data
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軸的樣式（一）
Highcharts 翻譯系列之十八：x軸樣式（二）
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區域圖
Legend：圖例選項
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
}, //圖例樣式
如果使用到其它屬性可參照以下資訊
Highcharts翻譯系列六：legend 圖例選項
Color 顏色選項
此處請參照HighCharts中文幫助文件
Title：標題選項
tooltip: {
formatter: function() { //在此處可以自定義提示資訊顯示的樣式
return '<b>'+ this.x.toLowerCase() +'： '+this.y +' 人</b> ' ;
}
},
如果使用到其它屬性可參照以下資訊
Highcharts翻譯系列之十六：tooltip工具提示
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',
count: 1,
text: '1周'
},{
type: 'month',
count: 1,
text: '1月'
}, {
type: 'month',
count: 3,
text: '3月'
}, {
type: 'month',
count: 6,
text: '6月'
}, {
type: 'ytd',
text: '1季度'
}, {
type: 'year',
count: 1,
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 頁面匯出按鈕漢化
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 |
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', |
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]，或 如果想對不同的列顯示不同的顏色請對該列使用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標籤的樣式，涵蓋了繪圖區 |