Highcharts là thư viện biểu đồ JavaScript cấp doanh nghiệp dựa trên SVG. Nó được phát hành lần đầu tiên vào năm 2009 bởi Highsoft ở Vik, Na Uy.

Highcharts hỗ trợ một danh sách dài các loại biểu đồ khác nhau, bao gồm line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemap, gauge, và gần như tất cả các loại biểu đồ. Nó đi kèm với tài liệu xuất sắc và vô số ví dụ. Nó mạnh mẽ với một đường cong học tập thấp. Hạn chế duy nhất là giấy phép là độc quyền. Nó miễn phí cho mục đích sử dụng cá nhân/phi thương mại, nhưng bạn phải trả tiền cho các ứng dụng thương mại.

Cùng với D3.js , Highcharts thống trị ứng dụng biểu đồ. Chúng ta hãy xem nó hoạt động như thế nào.

Thiết Lập Môi Trường Làm Việc

Chúng tôi sẽ sử dụng Tạo ứng dụng React để khám phá Highcharts. Lệnh sau tạo một dự án React:

% yarn create react-app react-highcharts
% cd react-highcharts

• highcharts: Đó là thư viện biểu đồ JavaScript.
• highcharts-react-official: Đây là trình bao bọc chính thức được Highcharts hỗ trợ cho React.

% yarn add highcharts highcharts-react-official

"dependencies": {
  "highcharts": "^10.3.2",
  "highcharts-react-official": "^3.1.0"
}

<HighchartsReact highcharts={Highcharts} options={option} />

series: [
  {
    data: [1, 2, 1, 4, 3, 6],
  },
  {
    data: [2, 7, 0, 4, 6, 2],
  },
]

div {
  display: flex;
  flex-wrap: wrap;
}

• Tại các dòng 6–28, một cấu hình biểu đồ được tạo.
  – Tại các dòng 7–11, type, width, và của biểu đồ heightđược xác định.
  – Tại các dòng 12–14, tiêu đề biểu đồ được tạo từ loại. Vì lodash đi kèm với Create React App , _.startCaseđược gọi để viết hoa từng chữ cái đầu tiên.
  – Tại các dòng 15–19, yAxis, trục Y hoặc trục giá trị, được định cấu hình bằng một title.
  – Tại các dòng 20–27, hai chuỗi dữ liệu được tạo.
• Tại các dòng 33–40, mỗi dòng tạo một biểu đồ với loại được chỉ định:
  – line(dòng 33): Biểu đồ đường được biểu thị bằng một loạt các điểm dữ liệu được kết nối với một đường thẳng.
  – spline(dòng 34): Biểu đồ spline vẽ một đường cong giữa các điểm trong một chuỗi dữ liệu.
  – area(dòng 35): Biểu đồ vùng hoạt động giống như biểu đồ đường, ngoại trừ việc nó lấp đầy khu vực giữa đường và ngưỡng, giá trị này là 0 theo mặc định.
  – areaspline(dòng 36): Biểu đồ đường khu vực giống như biểu đồ khu vực, ngoại trừ đường là một đường cong thay vì đường thẳng.
  – column(dòng 37): Biểu đồ cột hiển thị dữ liệu dưới dạng các thanh dọc.
  –bar(dòng 38): Biểu đồ thanh giống như biểu đồ cột, ngoại trừ trục X và trục Y được chuyển đổi.
  – pie(dòng 39): Biểu đồ hình tròn là một biểu đồ hình tròn được chia thành các cung tỷ lệ thuận với số lượng mà nó biểu thị.
  – scatter(dòng 40): Biểu đồ phân tán vẽ một dấu chấm cho từng điểm dữ liệu mà không kết nối chúng.

Ví dụ 2: Biểu đồ Tín dụng và Menu Xuất

Nhìn vào ảnh chụp màn hình ở trên. Theo mặc định, Highcharts đặt nhãn/liên kết tín dụng ở góc dưới bên phải của biểu đồ.

Văn bản và liên kết có thể được cấu hình. Và đây là một ví dụ:

credits: {
  text: 'My Credits',
  href: 'https://jenniferfubook.medium.com/jennifer-fus-web-development-publications-1a887e4454af',
}

credits: {
  enabled: false,
}

Mô-đun này có thể được bao gồm trong một dòng mã.

require('highcharts/modules/exporting')(Highcharts);

import HighchartsExporting from 'highcharts/modules/exporting';
HighchartsExporting(Highcharts);

Đây là sửa đổi src/App.js:

• Tại các dòng 5–6, mô-đun xuất đã được tải.
• Tại các dòng 30–32, các khoản tín dụng mặc định đã bị tắt.

Trên biểu đồ đường, nhấp vào Print chartmục menu và bật lên một phương thức để in biểu đồ hoặc lưu dưới dạng tệp PDF.

Trên biểu đồ đường, nhấp vào Download PNG imagemục menu và nó sẽ lưu tệp PNG vào Downloadsthư mục.

Mỗi biểu đồ có thể được lưu ở định dạng JPEG, PDF hoặc SVG.

Ví dụ 3: Biểu đồ cơ bản trong Chế độ xem 3D

highcharts-3dlà một mô-đun Highcharts cung cấp hỗ trợ 3D. Nó cần được nhập để tạo biểu đồ 3D.

Mô-đun này có thể được bao gồm trong một dòng mã

require('highcharts/highcharts-3d')(Highcharts);

import Highcharts3D from 'highcharts/highcharts-3d';
Highcharts3D(Highcharts);

• options3dđịnh cấu hình tùy chọn 3D. Cờ, enabled, bật biểu đồ 3D. alphavà betalà các góc để xoay chế độ xem của biểu đồ và depthxác định tổng độ sâu với giá trị mặc định là 100. Đây là một ví dụ:

options3d: {
  enabled: true,
  alpha: 15,
  beta: 30,
  depth: 300,
}

• Dữ liệu của biểu đồ có thể ở định dạng khác cho từng loại. xAxisxác định trục X hoặc trục danh mục. Đối với các ví dụ 3D của chúng tôi, ba ô xAxisđược xác định cho các ô ở các độ sâu khác nhau, mặc dù xAxisbản thân các ô này không nhìn thấy được.

• Ở dòng 6 và 8, mô-đun 3D của Highcharts được tải.
• Tại dòng 13–18, options3dbật biểu đồ 3D và định cấu hình góc quay và độ sâu.
• Tại các dòng 28–38, ba dòng xAxisđược đặt thành ẩn.
• Tại các dòng 39–43, plotOptions.[type].depthđược đặt thành 100.
• Tại các dòng 44–57, seriesxác định các ô cho xAxis 0, xAxis 1, và xAxis 2. Mỗi ô có sáu điểm.

Dưới đây là một số quan sát từ ảnh chụp màn hình ở trên:

• line, , và các biểu đồ được hiển thị độc đáo trong splinechế độ xem 3D.areacolumnbar
• Không areasplinexoay chế độ xem vì loại 3D không được hỗ trợ chính thức.
• Biểu pieđồ hoạt động, nhưng ba cái bánh xếp chồng lên nhau thì vụng về. Đơn giản hóa nó thành một chiếc bánh làm cho nó trông đẹp hơn:

series: [
  {
    data: [2, 2, 1, 4, 3, 2],
  },
]

       
                

                    
                    
                
            

const getOptions = (type) => ({
  chart: {
    type: 'scatter3d',
    options3d: {
      enabled: true,
      alpha: 15,
      beta: 30,
      depth: 300,
    },
  },
  title: {
    text: _.startCase(`${type} chart`),
  },
  yAxis: {
    title: {
      text: 'Values',
    },
  },
  series: [
    {
      data: [[0, 2, 0], [1, 2, 0], [2, 1, 0], [3, 4, 0], [4, 3, 0], [5, 2, 0]],
    },
    {
      data: [[0, 4, 100], [1, 3, 100], [2, 6, 100], [3, 5, 100], [4, 4, 100], [5, 6, 100]],
    },
    {
      data: [[0, 5, 200], [1, 7, 200], [2, 7, 200], [3, 6, 200], [4, 7, 200], [5, 7, 200]],
    },
  ],
  credits: {
    enabled: false,
  },
});

zAxis: {
  showFirstLabel: false
}

Ví dụ 4: Biểu đồ Heatmap

Bản đồ nhiệt là biểu diễn đồ họa của dữ liệu trong đó các giá trị riêng lẻ có trong ma trận được biểu thị dưới dạng màu sắc.

Biểu đồ bản đồ nhiệt yêu cầu nhập mô-đun bản đồ nhiệt. Nó có thể được thực hiện bằng một dòng mã:

require('highcharts/modules/heatmap')(Highcharts);

import HighchartsHeatmap from 'highcharts/modules/heatmap';
HighchartsHeatmap(Highcharts);

xAxis: {
  categories: ['A', 'B', 'C', 'D', 'E', 'F'],
}

yAxis: {
  categories: ['Apple', 'Banana', 'Pear'],
}

data: [
  [0, 0, 5], [0, 1, 8], [0, 2, 9],
  [1, 0, 3], [1, 1, 6], [1, 2, 2],
  [2, 0, 7], [2, 1, 1], [2, 2, 9],
  [3, 0, 4], [3, 1, 5], [3, 2, 1],
  [4, 0, 8], [4, 1, 6], [4, 2, 7],
  [5, 0, 7], [5, 1, 3], [5, 2, 4],
]

colorAxis: {
  min: 0,
  minColor: '#FF0000',
  maxColor: '#0000FF',
}

Đây là sửa đổi src/App.js:

• Ở dòng 6 và 8, mô-đun bản đồ nhiệt được tải.
• Tại dòng 13, thêm plotBorderWidthđể tách các khu vực bản đồ nhiệt.
• Tại các dòng 18–20, xAxisđược xác định bằng 6 categories.
• Tại các dòng 21–25, yAxisđược xác định bằng 3 categories. titlebị tắt (dòng 23) và categoriesđược hiển thị theo reversedthứ tự.
• Tại dòng 26–30, colorAxisđược định nghĩa là màu chuyển sắc từ màu trắng (dòng 28) sang màu của chuỗi đầu tiên (dòng 29). colorAxisthay thế các nhãn mặc định cho sê-ri.
• Tại các dòng 31–45, datađược xác định và dataLablescho phép hiển thị giá trị bản đồ nhiệt tại mỗi khu vực.
• Tại dòng 53, biểu đồ bản đồ nhiệt được tạo.

Ví dụ 5: Biểu đồ Treemap

Sơ đồ cây là biểu diễn đồ họa của dữ liệu trong đó dữ liệu phân cấp được hiển thị bằng cách sử dụng các hình lồng nhau, thường là hình chữ nhật.

Biểu đồ sơ đồ cây yêu cầu phải nhập mô-đun sơ đồ cây. Nó có thể được thực hiện bằng một dòng mã:

require('highcharts/modules/treemap')(Highcharts);

import HighchartsTreemap from 'highcharts/modules/treemap';
HighchartsTreemap(Highcharts);

data: [
  {
    id: 'parentId',
    name: 'Parent',
    color: '#FF0000',
  },
  {
    name: 'child1',
    parent: 'parentId',
    value: 3,
  },
  {
    name: 'child2',
    parent: 'parentId',
    value: 5,
  },
]

• Ở dòng 6 và 8, mô-đun sơ đồ cây được tải.
• Tại dòng 16, typeđược chỉ định trong series, thay vì chart.
• Tại dòng 17, layoutAlgorithmđược đặt thành 'sliceAndDice’, đây là hành vi mặc định chia vùng thành các phần nhỏ hơn.
• Tại các dòng 18–79, dataxác định dữ liệu phân cấp, xác định ba cấp độ gốc, Red(dòng 19–23), Green(dòng 24–28) và Blue(dòng 29–33). Redcó con (dòng 34–48), Greencó hai con (dòng 49–58) và Bluecó bốn con (dòng 59–78).
• Tại dòng 89, biểu đồ treemap được tạo.

Thay đổi layoutAlgorithmthành 'stripes’, và chúng ta thấy các khu vực được chia thành các dải:

Thay đổi layoutAlgorithmthành 'squarified’hoặc 'strip’, và chúng ta thấy các khu vực được chia thành các hình dạng sau:

Ví dụ 6: Biểu đồ đo

Biểu đồ đo còn được gọi là biểu đồ đồng hồ tốc độ hoặc biểu đồ quay số. Biểu đồ có một cây kim chỉ vào một giá trị nhất định trên điểm trục. Đó là một hình ảnh trực quan hiệu quả để đánh giá hiệu suất, theo dõi tiến trình và tạo điều kiện cho việc ra quyết định.

Biểu đồ đo yêu cầu highcharts-moremô-đun được nhập. Nó có thể được thực hiện bằng một dòng mã:

require('highcharts/highcharts-more')(Highcharts);

import HighchartsMore from 'highcharts/highcharts-more';
HighchartsMore(Highcharts);

yAxis: {
  min: 0,
  max: 100,
},
series: [
  {
    data: [80],
  },
]

• Tại dòng 6 và 8, highcharts-moređược tải.
• Tại các dòng 17–23, yAxisđặt minvà maxthành 0 và 100. yAxis.title.text được đặt thành 'Speed'.
• Tại các dòng 24–28, series.datađược đặt thành 80.
• Tại dòng 36, biểu đồ đo được tạo.

Biểu đồ đo có thể được xác định cho bất kỳ cung nào có pane.startAnglevà pane.endAngle. Khi nó không phải là một vòng tròn đầy đủ, pane.backgroundnên đặt thành null. Nó cũng là một ý tưởng tốt để điều chỉnh trung tâm đến vị trí [x, y].

pane: {
  startAngle: -90,
  endAngle: 89.9,
  background: null,
  center: ['50%', '70%'],
}

Chúng ta có thể tạo kiểu cho các dải đo dựa trên yAxiscác giá trị.

yAxis: {
    min: 0,
    max: 100,
    title: {
      text: 'Speed',
    },
    plotBands: [
      {
        from: 0,
        to: 25,
        color: '#FF0000',
        thickness: 15,
      },
      {
        from: 25,
        to: 80,
        color: '#00FF00',
        thickness: 15,
      },
      {
        from: 80,
        to: 100,
        color: '#0000FF',
        thickness: 15,
      },
    ],
  }

Có vẻ như điểm mấu chốt quá gần với con số.

Chúng tôi thay đổi kích thước dải thành kích thước 120%:

pane: {
  startAngle: -90,
  endAngle: 89.9,
  background: null,
  center: ['50%', '70%'],
  size: '120%',
}

Ví dụ 7: Khả năng truy cập biểu đồ

Thực hiện các ví dụ về biểu đồ và chúng tôi thấy cảnh báo sau trong bảng điều khiển.

highcharts.src.js:223Cảnh báo của Highcharts: Cân nhắc đưa vào mô-đun “accessibility.js” để làm cho biểu đồ của bạn dễ sử dụng hơn cho người khuyết tật. Đặt tùy chọn “accessibility.enabled” thành false để xóa cảnh báo này. Nhìn thấyhttps://www.highcharts.com/docs/accessibility/accessibility-module.

Kiểm tra các thành phần biểu đồ và chúng tôi không thấy thông tin trợ năng nào.

Khả năng truy cập làm cho các ứng dụng web có thể sử dụng được cho những người bị hạn chế về mặt nào đó, chẳng hạn như tầm nhìn (sử dụng bộ đọc màn hình) và tính di động (chỉ sử dụng bàn phím). Ngoài ra, những hạn chế có thể đến từ khả năng của thiết bị, chẳng hạn như thiết bị di động. Điều rất quan trọng là làm cho phần mềm Doanh nghiệp có thể truy cập được .

Mô-đun trợ năng có thể được nhập bằng một dòng mã:

require('highcharts/modules/accessibility')(Highcharts);

import HighchartsAccessibility from 'highcharts/modules/accessibility';
HighchartsAccessibility(Highcharts);

• Ở dòng 7 và 10, mô-đun trợ năng được tải.
• Tại dòng 19–22, accessibilityxác định tệp description.

Có nhiều thông tin về khả năng truy cập trong ảnh chụp màn hình ở trên, bao gồm cả mô tả về khả năng truy cập mà chúng tôi đã chỉ định:

<div aria-hidden="false" style="position: absolute; width: 1px; height: 1px; overflow: hidden; white-space: nowrap; clip: rect(1px, 1px, 1px, 1px); margin-top: -3px; opacity: 0.01;">
  <p>Gauge Chart</p>
  <div>Chart with 1 data point.</div>
  <div>The gauge chart shows the performance speed between 0 and 100.</div>
  <div>The chart has 1 Y axis displaying Speed. Data ranges from 80 to 80.</div>
</div>

Phần kết luận

Chúng tôi đã chỉ ra bảy ví dụ về Highcharts trong React, bao gồm 12 loại biểu đồ line, spline, area, areaspline, column, bar, pie, scatter, scatter3d, heatmap, treemapvà gauge.

Chúng tôi cũng đã viết bài về các loại Highcharts khác:

• Trong bài viết này , bubble, packedbubble, streamgraphvà cylinder.
• Trong bài viết này , sankeydiagram, arcdiagram, dependencywheelvà networkgraph.
• Trong bài viết này : parallelCoordinates.

Cảm ơn vì đã đọc.

Want to Connect? 

If you are interested, check out my directory of web development articles.