Highcharts - Thiết lập môi trường
Trong chương này, chúng ta sẽ thảo luận về cách thiết lập thư viện Highcharts được sử dụng trong phát triển ứng dụng web.
Highcharts yêu cầu jQuery làm phụ thuộc. Đầu tiên, chúng ta sẽ cài đặt thư viện jQuery và sau đó là thư viện Highcharts.
Cài đặt jQuery
Có hai cách để sử dụng jQuery.
Download- Tải xuống cục bộ từ jQuery.com và sử dụng nó.
CDN access- Bạn cũng có quyền truy cập vào CDN. CDN sẽ cung cấp cho bạn quyền truy cập trên khắp thế giới vào các trung tâm dữ liệu khu vực; trong trường hợp này, máy chủ của Google. Điều này có nghĩa là việc sử dụng CDN sẽ chuyển trách nhiệm lưu trữ tệp từ máy chủ của riêng bạn sang một loạt máy chủ bên ngoài. Điều này cũng mang lại một lợi thế là nếu khách truy cập vào trang web của bạn đã tải xuống bản sao jQuery từ cùng một CDN, thì sẽ không phải tải xuống lại.
Sử dụng jQuery đã tải xuống
Bao gồm tệp JavaScript jQuery trong trang HTML bằng cách sử dụng tập lệnh sau:
<head>
<script src = "/jquery/jquery.min.js"></script>
</head>
Sử dụng CDN
Chúng tôi đang sử dụng các phiên bản CDN của thư viện jQuery trong suốt hướng dẫn này.
Bao gồm tệp JavaScript jQuery trong trang HTML bằng cách sử dụng tập lệnh sau:
<head>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
</head>
Cài đặt Highcharts
Sau đây là hai cách để sử dụng Highcharts.
Download- Tải xuống cục bộ từ highcharts.com và sử dụng nó.
CDN access- Bạn cũng có quyền truy cập vào CDN. CDN sẽ cung cấp cho bạn quyền truy cập trên khắp thế giới vào các trung tâm dữ liệu khu vực; trong trường hợp này, máy chủ Highcharts - Code.Highcharts.Com.
Sử dụng Highcharts đã tải xuống
Bao gồm tệp JavaScript Highcharts trong trang HTML bằng cách sử dụng tập lệnh sau:
<head>
<script src = "/highcharts/highcharts.js"></script>
</head>
Sử dụng CDN
Chúng tôi đang sử dụng các phiên bản CDN của thư viện Highcharts trong suốt hướng dẫn này.
Bao gồm tệp JavaScript Highcharts trong trang HTML bằng cách sử dụng tập lệnh sau:
<head>
<script src = "https://code.highcharts.com/highcharts.js"></script>
</head>