Highcharts - Hướng dẫn nhanh

Highchartslà một thư viện biểu đồ dựa trên JavaScript thuần túy nhằm nâng cao các ứng dụng web bằng cách thêm khả năng lập biểu đồ tương tác. Nó hỗ trợ một loạt các biểu đồ. Biểu đồ được vẽ bằng SVG trong các trình duyệt tiêu chuẩn như Chrome, Firefox, Safari, Internet Explorer (IE). Trong IE 6 kế thừa, VML được sử dụng để vẽ đồ họa.

Các tính năng của Thư viện Highcharts

Bây giờ chúng ta hãy thảo luận một vài tính năng quan trọng của Thư viện Highcharts.

  • Compatability - Hoạt động dường như dễ dàng trên tất cả các trình duyệt và nền tảng di động chính như android và iOS.

  • Multitouch Support - Hỗ trợ cảm ứng đa điểm trên các nền tảng dựa trên màn hình cảm ứng như android và iOS.Ideal cho iPhone / iPad và điện thoại / máy tính bảng thông minh dựa trên Android.

  • Free to Use - Mã nguồn mở và được sử dụng miễn phí cho mục đích phi thương mại.

  • Lightweight - Thư viện lõi highcharts.js với kích thước gần 35KB, là một thư viện cực kỳ nhẹ.

  • Simple Configurations - Sử dụng json để xác định các cấu hình khác nhau của biểu đồ và rất dễ học và sử dụng.

  • Dynamic - Cho phép sửa đổi biểu đồ ngay cả sau khi tạo biểu đồ.

  • Multiple axes- Không bị giới hạn trục x, y. Hỗ trợ nhiều trục trên biểu đồ.

  • Configurable tooltips- Chú giải công cụ xuất hiện khi người dùng di chuột qua bất kỳ điểm nào trên biểu đồ. Highcharts cung cấp bộ định dạng có sẵn chú giải công cụ hoặc bộ định dạng gọi lại để điều khiển chú giải công cụ theo chương trình.

  • DateTime support- Xử lý ngày giờ đặc biệt. Cung cấp nhiều điều khiển có sẵn đối với các danh mục ngày tháng.

  • Export - Xuất biểu đồ sang định dạng PDF / PNG / JPG / SVG bằng cách bật tính năng xuất.

  • Print - In biểu đồ bằng trang web.

  • Zoomablity - Hỗ trợ biểu đồ phóng to để xem dữ liệu chính xác hơn.

  • External data- Hỗ trợ tải dữ liệu động từ máy chủ. Cung cấp quyền kiểm soát dữ liệu bằng cách sử dụng các chức năng gọi lại.

  • Text Rotation - Hỗ trợ xoay nhãn theo bất kỳ hướng nào.

Các loại biểu đồ được hỗ trợ

Thư viện Highcharts cung cấp các loại biểu đồ sau:

Sr.No. Loại biểu đồ & Mô tả
1

Line Charts

Được sử dụng để vẽ biểu đồ dựa trên đường / spline.
2

Area Charts

Được sử dụng để vẽ biểu đồ khu vực khôn ngoan.
3

Pie Charts

Dùng để vẽ biểu đồ hình tròn.
4

Scatter Charts

Dùng để vẽ biểu đồ phân tán.
5

Bubble Charts

Được sử dụng để vẽ biểu đồ dựa trên bong bóng.
6

Dynamic Charts

Được sử dụng để vẽ biểu đồ động, nơi người dùng có thể sửa đổi biểu đồ.
7

Combinations

Được sử dụng để vẽ kết hợp nhiều loại biểu đồ.
số 8

3D Charts

Dùng để vẽ biểu đồ 3D.
9

Angular Gauges

Dùng để vẽ biểu đồ loại công tơ mét.
10

Heat Maps

Dùng để vẽ bản đồ nhiệt.
11

Tree Maps

Dùng để vẽ bản đồ cây.

Trong các chương tiếp theo, chúng ta sẽ thảo luận chi tiết về từng loại biểu đồ được đề cập ở trên với các ví dụ.

Giấy phép

Highcharts là mã nguồn mở và được sử dụng miễn phí cho mục đích phi thương mại. Để sử dụng Highcharts trong các dự án thương mại, hãy nhấp vào liên kết - Giấy phép và Giá cả

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ủ lưu trữ 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>

Trong chương này, chúng tôi sẽ giới thiệu cấu hình cần thiết để vẽ biểu đồ bằng cách sử dụng API Highcharts.

Bước 1: Tạo trang HTML

Tạo một trang HTML với thư viện javascript jQuery và Highcharts.

HighchartsTestHarness.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script>
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      
      <script language = "JavaScript">
         $(document).ready(function() {
         });
      </script>
      
   </body>
</html>

Đây container div được sử dụng để chứa biểu đồ được vẽ bằng thư viện Highcharts.

Bước 2: Tạo cấu hình

Thư viện Highcharts sử dụng các cấu hình rất đơn giản bằng cú pháp json.

$('#container').highcharts(json);

Ở đây json đại diện cho dữ liệu và cấu hình json mà thư viện Highcharts sử dụng để vẽ biểu đồ trong vùng chứa div bằng phương thức highcharts (). Bây giờ, chúng ta sẽ cấu hình các tham số khác nhau để tạo chuỗi json cần thiết.

tiêu đề

Định cấu hình tiêu đề của biểu đồ.

var title = {
   text: 'Monthly Average Temperature'   
};

phụ đề

Định cấu hình phụ đề của biểu đồ.

var subtitle = {
   text: 'Source: WorldClimate.com'
};

xAxis

Định cấu hình biểu ngữ để được hiển thị trên Trục X.

var xAxis = {
   categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'
      ,'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
};

yAxis

Định cấu hình tiêu đề, các dòng cốt truyện để hiển thị trên trục Y.

var yAxis = {
   title: {
      text: 'Temperature (\xB0C)'
   },
   plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
   }]
};

chú giải công cụ

Định cấu hình chú giải công cụ. Đặt hậu tố được thêm vào sau giá trị (trục y).

var tooltip = {
   valueSuffix: '\xB0C'
}

huyền thoại

Định cấu hình chú giải được hiển thị ở bên phải của biểu đồ cùng với các thuộc tính khác.

var legend = {
   layout: 'vertical',
   align: 'right',
   verticalAlign: 'middle',
   borderWidth: 0
};

loạt

Định cấu hình dữ liệu được hiển thị trên biểu đồ. Chuỗi là một mảng trong đó mỗi phần tử của mảng này đại diện cho một dòng duy nhất trên biểu đồ.

var series = [
   {
      name: 'Tokyo',
      data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
   }, 
   {
      name: 'New York',
      data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
   }, 
   {
      name: 'Berlin',
      data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
   }, 
   {
      name: 'London',
      data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
   }
];

Bước 3: Xây dựng dữ liệu json

Kết hợp tất cả các cấu hình.

var json = {};

json.title = title;
json.subtitle = subtitle;
json.xAxis = xAxis;
json.yAxis = yAxis;
json.tooltip = tooltip;
json.legend = legend;
json.series = series;

Bước 4: Vẽ biểu đồ

$('#container').highcharts(json);

Thí dụ

Hãy xem xét ví dụ sau để hiểu thêm về Cú pháp cấu hình:

highcharts_configuration.htm

<html>
   <head>
      <title>Highcharts Tutorial</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
      <script src = "https://code.highcharts.com/highcharts.js"></script> 
   </head>
   
   <body>
      <div id = "container" style = "width: 550px; height: 400px; margin: 0 auto"></div>
      <script language = "JavaScript">
         $(document).ready(function() {
            var title = {
               text: 'Monthly Average Temperature'   
            };
            var subtitle = {
               text: 'Source: WorldClimate.com'
            };
            var xAxis = {
               categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                  'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
            };
            var yAxis = {
               title: {
                  text: 'Temperature (\xB0C)'
               },
               plotLines: [{
                  value: 0,
                  width: 1,
                  color: '#808080'
               }]
            };   

            var tooltip = {
               valueSuffix: '\xB0C'
            }
            var legend = {
               layout: 'vertical',
               align: 'right',
               verticalAlign: 'middle',
               borderWidth: 0
            };
            var series =  [{
                  name: 'Tokyo',
                  data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
                     26.5, 23.3, 18.3, 13.9, 9.6]
               }, 
               {
                  name: 'New York',
                  data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 
                     24.1, 20.1, 14.1, 8.6, 2.5]
               }, 
               {
                  name: 'Berlin',
                  data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6,
                     17.9, 14.3, 9.0, 3.9, 1.0]
               }, 
               {
                  name: 'London',
                  data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 
                     16.6, 14.2, 10.3, 6.6, 4.8]
               }
            ];

            var json = {};
            json.title = title;
            json.subtitle = subtitle;
            json.xAxis = xAxis;
            json.yAxis = yAxis;
            json.tooltip = tooltip;
            json.legend = legend;
            json.series = series;

            $('#container').highcharts(json);
         });
      </script>
   </body>
   
</html>

Kết quả

Xác minh kết quả.

Biểu đồ đường được sử dụng để vẽ biểu đồ dựa trên đường / spline. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên đường và spline khác nhau.

Sr.No. Loại biểu đồ & Mô tả
1 Dòng cơ bản

Biểu đồ đường cơ bản.
2 Với nhãn dữ liệu

Biểu đồ với các nhãn dữ liệu.
3 Dữ liệu được tải Ajax, các điểm có thể nhấp

Biểu đồ được vẽ sau khi lấy dữ liệu từ máy chủ.
4 Chuỗi thời gian, có thể thu phóng

Biểu đồ với chuỗi thời gian.
5 Spline với các trục ngược

Biểu đồ spline có trục đảo ngược.
6 Spline với các ký hiệu

Biểu đồ spline sử dụng các ký hiệu về nhiệt / mưa.
7 Spline với các dải cốt truyện

Biểu đồ spline với các dải âm mưu.
số 8 Dữ liệu thời gian với khoảng thời gian không đều

Biểu đồ của một tập hợp lớn dữ liệu dựa trên thời gian.
9 Trục lôgarit

Biểu đồ mô tả trục logarit.

Biểu đồ khu vực được sử dụng để vẽ biểu đồ dựa trên khu vực. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên diện tích khác nhau.

Sr.No. Loại biểu đồ & Mô tả
1 Khu vực cơ bản

Biểu đồ khu vực cơ bản.
2 Khu vực có giá trị âm

Biểu đồ vùng có giá trị âm.
3 Khu vực xếp chồng lên nhau

Biểu đồ có các khu vực xếp chồng lên nhau.
4 Phần trăm diện tích

Biểu đồ với dữ liệu theo tỷ lệ phần trăm.
5 Khu vực thiếu điểm

Biểu đồ với các điểm còn thiếu trong dữ liệu.
6 Trục ngược

Khu vực sử dụng trục ngược.
7 Khu vực-spline

Biểu đồ khu vực sử dụng spline.
số 8 Phạm vi khu vực

Biểu đồ vùng sử dụng phạm vi.
9 Phạm vi khu vực và dòng

Biểu đồ khu vực sử dụng phạm vi và đường.

Biểu đồ thanh được sử dụng để vẽ biểu đồ dựa trên khu vực. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên thanh khác nhau.

Sr.No. Loại biểu đồ & Mô tả
1 Thanh cơ bản

Biểu đồ thanh cơ bản.
2 Thanh xếp chồng

Biểu đồ thanh có thanh xếp chồng lên nhau.
3 Khu vực xếp chồng phủ định

Biểu đồ thanh với ngăn xếp âm.

Biểu đồ cột được sử dụng để vẽ biểu đồ dựa trên cột. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên cột khác nhau.

Sr.No. Loại biểu đồ & Mô tả
1 Cột cơ bản

Biểu đồ cột cơ bản.
2 Cột có giá trị âm

Biểu đồ cột có giá trị âm.
3 Cột xếp chồng

Biểu đồ có cột xếp chồng lên nhau.
4 Cột xếp chồng và nhóm được nhóm

Biểu đồ với cột ở dạng xếp chồng và nhóm.
5 Cột có tỷ lệ phần trăm xếp chồng lên nhau

Biểu đồ với tỷ lệ phần trăm xếp chồng lên nhau.
6 Cột có nhãn được xoay

Biểu đồ Cột với các nhãn được xoay trong các cột.
7 Cột có chi tiết

Biểu đồ cột với khả năng xem chi tiết.
số 8 Cột có vị trí cố định

Biểu đồ cột với vị trí cố định.
9 Dữ liệu được xác định trong bảng HTML

Biểu đồ cột sử dụng Dữ liệu được xác định trong bảng HTML.
10 Dải cột

Biểu đồ cột sử dụng phạm vi.

Biểu đồ hình tròn được sử dụng để vẽ biểu đồ dựa trên hình tròn. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ dựa trên hình tròn.

Sr.No. Loại biểu đồ & Mô tả
1 Bánh cơ bản

Biểu đồ hình tròn cơ bản.
2 Pie with Legends

Biểu đồ hình tròn với Huyền thoại.
3 Biểu đồ bánh rán

Biểu đồ Donut.
4 Bánh donut hình bán nguyệt

Biểu đồ bánh rán bán nguyệt.
5 Pie với chi tiết

Biểu đồ hình tròn với khả năng xem chi tiết.
6 Biểu đồ hình tròn với độ dốc

Biểu đồ hình tròn với tô màu gradient.
7 Biểu đồ hình tròn với đơn sắc

Biểu đồ hình tròn với tô màu đơn sắc.

Biểu đồ phân tán được sử dụng để vẽ biểu đồ dựa trên phân tán. Trong phần này, chúng ta sẽ thảo luận về (các) loại biểu đồ dựa trên phân tán khác nhau.

Sr.No. Loại biểu đồ & Mô tả
1 Biểu đồ phân tán

Biểu đồ phân tán.

Biểu đồ bong bóng được sử dụng để vẽ biểu đồ dựa trên bong bóng. Trong phần này, chúng ta sẽ thảo luận về (các) loại biểu đồ dựa trên bong bóng khác nhau.

Sr.No. Loại biểu đồ & Mô tả
1 Biểu đồ bong bóng

Biểu đồ bong bóng.
2 Biểu đồ bong bóng 3D

Biểu đồ bong bóng 3D.

Biểu đồ động được sử dụng để vẽ biểu đồ dựa trên dữ liệu nơi dữ liệu có thể thay đổi sau khi hiển thị biểu đồ. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ động khác nhau.

Sr.No. Loại biểu đồ & Mô tả
1 Spline cập nhật từng giây

Biểu đồ Spline cập nhật mỗi giây.
2 Nhấp để thêm điểm

Biểu đồ với khả năng cộng điểm.

Biểu đồ kết hợp được sử dụng để vẽ biểu đồ hỗn hợp; ví dụ: biểu đồ thanh với biểu đồ hình tròn. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ kết hợp khác nhau.

Sr.No. Loại biểu đồ & Mô tả
1 Cột, Dòng và Hình tròn

Biểu đồ với Cột, Đường và Hình tròn.
2 Trục kép, Dòng và Cột

Biểu đồ với Trục kép, Đường và Cột.
3 Nhiều trục

Biểu đồ có nhiều trục.
4 Phân tán với đường hồi quy

Biểu đồ phân tán với đường hồi quy.

Biểu đồ 3D được sử dụng để vẽ biểu đồ 3 chiều. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ 3D khác nhau.

Sr.No. Loại biểu đồ & Mô tả
1 Cột 3D

Biểu đồ cột 3D.
2 Cột 3D có rỗng

Biểu đồ cột 3D với giá trị rỗng và 0.
3 Cột 3D có xếp chồng

Biểu đồ cột 3D với xếp chồng và nhóm.
4 Bánh 3D

Biểu đồ hình tròn 3D.
5 Bánh donut 3D

Biểu đồ bánh rán 3D.

Biểu đồ Angular Gauges được sử dụng để vẽ biểu đồ dạng mét / gauge. Trong phần này, chúng ta sẽ thảo luận về các loại biểu đồ Angular Gauges.

Sr.No. Loại biểu đồ & Mô tả
1 Angular Gauge

Biểu đồ đo góc.
2 Máy đo rắn

Biểu đồ đo đặc.
3 Đồng hồ

Đồng hồ.
4 Máy đo với trục kép

Biểu đồ đo với trục kép.
5 VU Meter

Biểu đồ VU Meter.

Biểu đồ Bản đồ nhiệt được sử dụng để vẽ biểu đồ loại bản đồ nhiệt. Trong phần này, chúng ta sẽ thảo luận về các loại Bản đồ nhiệt khác nhau.

Sr.No. Loại biểu đồ & Mô tả
1 Bản đồ nhiệt

Bản đồ nhiệt.
2 Bản đồ nhiệt lớn

Bản đồ nhiệt lớn.

Biểu đồ Tree Map được sử dụng để vẽ các biểu đồ dạng bản đồ dạng cây. Trong phần này, chúng ta sẽ thảo luận về các loại Bản đồ cây khác nhau.

Sr.No. Loại biểu đồ & Mô tả
1 Bản đồ cây

Bản đồ cây với trục màu.
2 Bản đồ cây với các cấp độ

Bản đồ cây với các cấp độ.
3 Bản đồ cây lớn

Bản đồ cây lớn.
ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved