Hướng dân sử dụng HIGHCHART
Bài đăng này đã không được cập nhật trong 9 năm
**HIGHCHART LÀ GÌ ? **
Highcharts là một thư viện biểu đồ được viết bằng JavaScript, cung cấp một cách dễ dàng việc thêm các biểu đồ tương tác vào trang web của bạn hoặc ứng dụng web. Highcharts hiện hỗ trợ các dạng line, spline, area, areaspline, column, bar, pie, scatter, , angular gauges, angular gauges, arearange, areasplinerange, columnrange, bubble, box plot, error bars, funnel, waterfall và polar chart types.
HƯỚNG DẪN TẠO BIỂU ĐỒ
Chúng ta sẽ bắt đầu bằng cách tạo ra một biểu đồ thanh đơn giản.
- Chèn thêm một thẻ
<div>trong trang web. Cấp cho nó một id và thiết lập chiều rộng và chiều cao cụ thể của biểu đồ của bạn.
<div id="container" style="width:100%; height:400px;"></div>
```
2. Một biểu đồ được khởi tạo bằng cách thêm các tag JavaScript, `<script>` `</ script>`, bất cứ nơi nào trong trang web, có chứa đoạn mã sau đây trong jQuery.
````javascript
$(function () {
$('#container').highcharts({
chart: {
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
});
});
```
Nếu bạn sử dụng MooTools hoặc Prototype, thay vì sử dụng `$ (function ()` thì phài làm cách khác. Ngoài ra, Highcharts không phải là một plugin cho framework, vì vậy bạn cần phải sử dụng Highcharts.Chart và thiết lập chart.renderTo option.
**MOOTOOLS**
````javascript
window.addEvent('domready', function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
...
});
```
**PROTOTYPE**
````javascript
document.observe("dom:loaded", function() {
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'bar'
...
});
```
Nếu bạn chèn một biểu đồ Stock, thì hãy sử dụng một phương pháp riêng biệt được gọi là Highcharts StockChart. Trong các biểu đồ này, các dữ liệu được lấy từ một mảng JavaScript, hoặc lấy từ một tập tin JavaScript riêng biệt hoặc là gọi từ Ajax đến máy chủ.
````javascript
var chart1; // globally available
$(function() {
chart1 = new Highcharts.StockChart({
chart: {
renderTo: 'container'
},
rangeSelector: {
selected: 1
},
series: [{
name: 'USD to EUR',
data: usdtoeur // predefined JavaScript array
}]
});
});
```
1. Bây giờ bạn sẽ thấy biểu đồ này trên trang web của bạn
[](http://tech.blog.framgia.com/vn/wp-content/uploads/2014/07/your-first-chart.png)
1. Một cách tùy chọn, bạn có thể sử dụng theme toàn cục cho biểu đồ của bạn. Một theme là một tập hợp các tùy chọn được áp dụng 1 cách toàn cục thông qua các phương thức Highcharts.setOptions. Gói theme download về đi kèm với bốn theme được xác định trước. Để sử dụng 1 theme từ những files đó, thêm vào trực tiếp sau khi gọi tập tin highcharts.js.
```
<script type="text/javascript" src="/js/themes/gray.js"></script>
```
Dưới đây là 1 vài ví dụ về Highchart
[ Biểu đồ thanh dạng đơn giản (jQuery)](http://jsfiddle.net/highcharts/kh5jY/)
[Biểu đồ thanh dạng đơn giản (MooTools)](http://jsfiddle.net/highcharts/NxHgR/)
[Biểu đồ thanh dạng đơn giản (Prototype)](http://jsfiddle.net/highcharts/nacKs/)
[Ví dụ về̀ Highstock](http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/stock/demo/basic-line/)
**THIẾT LẬP TÙY CHỌN**
Highcharts sử dụng JavaScript để xác định các tùy chọn hoặc cài đặt của một biểu đồ. Phần này sẽ giải thích cách setting tùy chọn và làm thế nào để sử dụng nó.
**ĐỐI TƯỢNG** **OPTIONS**
Khi bạn khởi tạo biểu đồ bằng cách sử dụng Highcharts.Chart xây dựng của nó, tham số bạn phải truyền đầu tiên là đối tượng Option.
Trong ví dụ dưới đây các mã được đánh dấu màu đỏ đại diện cho các đối tượng Option:
````javascript
$(document).ready(function() {
var chart1 = new Highcharts.Chart(<span style="color: #ff0000;">{
chart: {
renderTo: 'container',
type: 'bar'
},
title: {
text: 'Fruit Consumption'
},
xAxis: {
categories: ['Apples', 'Bananas', 'Oranges']
},
yAxis: {
title: {
text: 'Fruit eaten'
}
},
series: [{
name: 'Jane',
data: [1, 0, 4]
}, {
name: 'John',
data: [5, 7, 3]
}]
}</span>);
});
```
Để sử dụng Highcharts một cách hiệu quả nhất, điều quan trọng là phải hiểu đối tượng Option và làm thế nào nó có thể được thay đổi theo chương trình. Đây là một số khái niệm quan trọng trong JavaScript:
* Các tùy chọn Highcharts trong các ví dụ được xác định là đối tượng chữ (object literals). Bằng việc cấu hình theo cách này, chúng ta có thể có một đối tượng với cấu hình có thể đọc được. Đoạn code dưới đây có lẽ quen thuộc hơn với các nhà phát triển ngôn ngữ lien quan đến C hoặc C.
````javascript
var options = new Object();
options.chart = new Object();
options.chart.renderTo = 'container';
options.chart.type = 'bar';
options.series = new Array();
options.series[0] = new Object();
options.series[0].name = 'Jane';
options.series[0].data = new Array(1, 0, 4);</pre>
<pre style="margin-left: 40px;">$(document).ready(function() {
var chart = new Highcharts.Chart(options);
});
```
* Sau khi một đối tượng được tạo ra bằng cách sử dụng ký hiệu đối tượng chữ (object literal notation), chúng ta có thể mở rộng lượng ký hiệu dấu chấm. Đoạn code dưới đây sẽ them 1 series ký hiệu khác cho nó. Chú ý rằng series Option là 1 mảng, cho nên chúng ta phải sử dụng phương thức Push.
````javascript
options.series.push({
name: 'John',
data: [3, 4, 2]
})
```
* Một chú ý khi làm việc với JavaScript, là ký hiệu dấu chấm và ký hiệu khung vuông là tương đương, vì vậy bạn có thể truy cập tất cả phần từ thông qua tên của chuỗi. Mà trong thực tế có nghĩa là. `options.renderTo` luôn luôn giống nhau như `options['renderTo']`
**OPTION TOÀN CỤC**
Nếu bạn muốn sử dụng một tập hợp các Options cho tất cả các biểu đồ trên cùng một trang, sủ
Highcharts.setOptions như hình dưới đây.
````javascript
$(function() {
Highcharts.setOptions({
chart: {
backgroundColor: {
linearGradient: [0, 0, 500, 500],
stops: [
[0, 'rgb(255, 255, 255)'],
[1, 'rgb(240, 240, 255)']
]
},
borderWidth: 2,
plotBackgroundColor: 'rgba(255, 255, 255, .9)',
plotShadow: true,
plotBorderWidth: 1
}
});
var chart1 = new Highcharts.Chart({
chart: {
renderTo: 'container',
},
xAxis: {
type: 'datetime'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}]
});
var chart2 = new Highcharts.Chart({
chart: {
renderTo: 'container2',
type: 'column'
},
xAxis: {
type: 'datetime'
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
pointStart: Date.UTC(2010, 0, 1),
pointInterval: 3600 * 1000 // one hour
}]
});
});
```
Tài liệu tham khảo thêm về Highchart Option: [http://api.highcharts.com/highcharts](http://api.highcharts.com/highcharts)All rights reserved
