HIGHCHART API REFERENCE
Bài đăng này đã không được cập nhật trong 9 năm
Trước khi đi tìm hiểu Highchart API reference có những option nào chúng ta đi tìm hiểu xem Highchart dùng để làm gì?. Highchart hỗ trợ coder trong việc vẽ biểu đồ bằng Jquery trong lập trình web hoặc các ứng dụng web. Highchart hiện tại hỗ trợ chúng ta các dạng biểu đồ sau :
-
Line chart
: basic line, clickable points, with data labels, time series + zoomable, spline with inverted axes, spline with symbols, spline with symbols, spline with plot bands, logarithmic axis -
Area chart
: basic area, area with negative values, stack area, percentage area, area with missing points, inverted axes, area-spline, area range, area range and line, sparkline charts. -
Column and bar charts
: basic bar, stscked bar, bar with negative values, stacked column, stacked and grouped column, stack percentage column, column with rotated labels, column with drilldown, fixed placement columns, data defined in a HTML table, column range. -
Pie charts
: pie chart, pie with legend, donut chart, semi circle dount, pie with drilldown, pie with gradient fill, pie with monochrome fill. -
Scatter and bubble charts
(đồ thị rải) : scatter plot, bubble chart, 3D bubbles. -
Dynamic charts
(đồ thị động) : spline updating each second, click to add a point, master-detail chart. -
Combinations
(đồ thị tổ họp nhiều kiểu) : column + line and pie, dual axes, line and column, multiple axes, scatter with regression line, meteogram. -
3D charts
: 3D column, 3D column with null and 0 values, 3d column with stacking and grouping, 3D pie, 3D donut, 3D scatter chart. -
Gauges
: angular gauge, solid gauge, clock, gauge with dual axes, VU metter. -
Heat maps
: heat map, large heat map. -
More chart types
: polar chart, spiderweb, wind rose, box plot, error bar, waterfall, funnel chart, pyramid chart, general drawing.
Bài viết về Highchart API Reference này mình sẽ giới thiệu về các chart options
nói chung.
Chart :
Giới thiệu về các chart options
nói chung
Highchart giúp chúng ta vẽ hình dễ dàng và linh hoạt hơn trong lập trình web. Với các option
mà highchart mang lại cho chúng ta có thể nói là rất tiện lợi và dễ sử dụng. Tôi xin nói qua một vài option phổ biến và thường dung nhất dưới đây:
-
alignTicks
: Khi sử dụng nhiều trục trên biểu đồ, ticks của 2 hay nhiều trục đối diện sẽ được tự động sắp xếp cácticks
thẳng hàng tương đương. Không sử dụng thì đểalignTicks
là 0. -
Các option điều chỉnh biểu đồ căn bản: Highchart hỗ trợ rất nhiều các option chỉnh sửa định dạng biểu đồ như :
backgroundColor, borderColor, borderRadius, borderWidth
,className
: add class vào biểu đồ,defaultSeriesType
: kiểu của biểu đồ ( ở đây ta có thể dung đơn giản option type),height
: độ cao. -
Highchart còn hỗ trợ cả
margin, marginBottom, marginLeft, marginRight, marginTop, plotBackgroundColor, plotBackgroundImage, plotBorderColor, plotBorderWidth, plotShadow
trong việc điều chỉnh định dạng căn bản chỉ trong biểu đồ -
Hoặc bạn có thể để style, width riêng cho chart của bạn.
Colors
: Các màu mặc định trong High Chart trong mảng sau:Colors: [‘7cb5ec’, ‘#434348’, ‘#90ed7d’, ‘#f7a35c’, ‘#8085e9’, ‘#f15c80’, ‘#e4d354’, ‘#8085e8’, ‘#8d4653’, ‘#91e8e1’]
-
Credits
:Khi vẽ biểu đồ bằng highchart nếu bạn muốn để nguồn highchart bạn có thể dungoption credits
dạng như sau :
credits: {
enabled: true },
Nếu không muốn thì có thể để `enabled: false`
- Hoặc có thể để bất cứ chỗ nào bạn muốn khi thêm
option position
. Ví dụ như:
position: {
align: 'right',
x: -10, verticalAlign: 'bottom',
y: -5
}
- Cài đặt kiểu hiển thị của
credits
nếu sử dụngoption style
. Ví dụ :
style: {
cursor: 'pointer',
color: '#909090',
fontSize: '10px'
}
-
Nếu bạn không muốn để text mặc định là http://www.highcharts.com/ thì bạn có thể thay đổi bằng
option text
và lưu text theo ý của bạn. -
Drilldown
: Một option mang lại hiệu ứng rất đẹp mắt cho người dùng. Thường được sử dụng trong biểu đồ hình cột.Có thể tham khảo kỹ trong ví dụ sau : http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/labels/
Trong đó ta thấy :
activeAxisLabelStyle
: kiểu hiển thị text trên trục X,activeDataLabelStyle
: kiểu hiện thị text trên cột data,drillUpButton
: thể hiện hiệu ứng của biểu đồ. -
Exporting
: giúp bạnexport
biểu đồ có thể lưu ở dạng ảnh nếu dùngoption type
. Bạn có thể đặt tên theo ý muốn của bạn nếu dùngoption filename
.Ví dụ về option exporting:
exporting: {
sourceWidth: 400,
sourceHeight: 200,
scale: 2,
chartOptions: {
subtitle: null
}
}
-
Buttons
: bạn có thể cài đặt thuộc tính riêng củabutton download
nếu không muốn dùng cài đặt mặc định của highchart.Có rất nhiều option như :
align, height, symbolFill
,symbolSize
: Size của button download,symbolStrokeWidth, symbol1X, symbol1Y, text, theme, verticalAlign, width
.Ví dụ về phần cài đặt
button download
:
navigation: {
buttonOptions: {
height: 40,
width: 48,
symbolSize: 24,
symbolX: 23,
symbolY: 21,
symbolStrokeWidth: 2
}
}
-
Legend
: Biểu đồ thì thường có chú thích và khi đó bạn nên sử dụngoption legend
Bạn có thể thể điều chỉnh vị trí kích thước hay màu sắc,….củalegend
bằng cácoption
:-
Align
:left
hoặcright
,center
. Hoặc các option khác :width
, chỉnh theo trục x, y. -
backgroundColor, borderColor, borderRadius, borderWidth
. -
Nếu bạn không muốn hiện thị
legend
trong biểu đồ thì bạn có thể sử dụngoption enable
để ẩnlegend
đi. -
Bạn có thể diều chỉnh màu sắc, style cho từng item bằng các option :
itemDistance, itemHiddenStyle, itemHoverStyle, itemMarginBottom, itemMarginTop, itemStyle
(cài đặt chung),itemWidth
. -
Định dạng legend thì ta dùng option :
labelFormatter
-
-
Loading
: option này giúp bạn có thể thêm màn hình hiển thịloading
hoặchide
màn hình hiện thịloading
. Nó là một tiện ích cho nhà phát triển có thể tương tác với dữ liệu cuối cùng hoặc nói cách khác là có thể cập nhật dữ liệu mới nhất. Nó hộ trợ người dùng :hideDuration, showDuration
(ẩn, hiện thị loading screen trong bao nhiêu lâu),labelStyle
(CSS style),style loading screen
.Ví dụ:
style: {
position: 'absolute',
backgroundColor: 'white',
opacity: 0.5,
textAlign: 'center'
}
...continue........
All rights reserved