Trực quan hóa dữ liệu với Bảng điều khiển gói phản ứng Highcharts


Hoàng Phượng Long
8 tháng trước
Hữu ích 0 Chia sẻ Viết bình luận 0
Đã xem 5951

Trong bài viết trước của tôi , tôi đã chỉ cho bạn cách bắt đầu với trình bao bọc Highcharts React chính thức .

Trong hướng dẫn này, tôi sẽ chỉ cho bạn cách tạo bảng điều khiển tương tác đơn giản với Highcharts và trình bao bọc React. Bài viết này phù hợp cho các nhà phát triển ở tất cả các cấp. Nó sẽ là một bản đọc nhanh cho bất kỳ nhà phát triển có kinh nghiệm nào và cung cấp trợ giúp cho những người chưa quen với React hoặc Highcharts.

Ghi chú
Tôi đã sử dụng Tạo ứng dụng ReactIDE Visual Studio Code để xây dựng dự án này; bạn có thể tải xuống dự án từ liên kết GitHub này hoặc từ Hộp thư . Nếu cần, hãy tham khảo bài viết trước để biết cách tạo dự án từ đầu.

Bảng điều khiển bên dưới hiển thị thế hệ năng lượng ròng ở Hoa Kỳ từ năm 2001 đến 2015. Bảng điều khiển cho phép người xem so sánh các nguồn năng lượng chính được sản xuất trong các loại sau: nhiên liệu hóa thạch, năng lượng thủy điện, sinh khối và năng lượng tái tạo. Tôi đã thu thập dữ liệu từ Cơ quan Thông tin Năng lượng Hoa Kỳ còn được gọi là EIA .

Khi tạo bảng điều khiển, tôi đã làm theo các thực tiễn tốt nhất sau:

  1. Tách nền khỏi các biểu đồ (nghĩa là sử dụng màu sắc để đánh dấu các ranh giới của từng tiện ích biểu đồ).
  2. Giữ huyền thoại gần với bảng xếp hạng.
  3. Tránh các biểu đồ đông đúc (nghĩa là chia nhỏ thông tin quan trọng thành nhiều biểu đồ, thay vì nhồi nhét quá nhiều dữ liệu vào một biểu đồ).
  4. Cung cấp các công cụ để khám phá dữ liệu (ví dụ: phóng to và lọc).
  5. Hãy nghĩ về thiết kế đáp ứng.

Để tìm hiểu thêm về cách tạo bảng điều khiển hiệu quả, hãy kiểm tra bài viết sau 6 Điều cần xem xét trước khi đưa Biểu đồ vào Bảng điều khiển ; nơi bạn sẽ tìm thấy nhiều chi tiết và bản demo về từng điểm được mô tả ở trên.

Để kiểm tra bảng điều khiển tương tác trực tiếp, nhấp vào liên kết dự án Codandbox hoặc nhấp vào hình dưới đây:

Hãy cùng trải qua quá trình tạo bảng điều khiển!

Kiến trúc

Hãy bắt đầu bằng cách xem xét kiến ​​trúc toàn cầu. Quy hoạch kiến ​​trúc giúp hiển thị những kết nối giữa các thành phần sẽ là gì; nó cũng trực quan hóa luồng dữ liệu. Tôi thực sự khuyên bạn nên dành thời gian lên kế hoạch cho kiến ​​trúc của mình trước khi nhảy vào mã; bạn sẽ tiết kiệm cho mình rất nhiều thời gian và thất vọng.

Ý tưởng chính của bảng điều khiển này tương đối đơn giản: người dùng chọn phạm vi ngày thông qua giao diện người dùng, hành động này kích hoạt quy trình lấy dữ liệu từ phạm vi ngày này, tóm tắt dữ liệu theo nguồn năng lượng, sau đó phân loại kết quả là nhiên liệu hóa thạch, thủy điện năng lượng, sinh khối, hoặc năng lượng tái tạo. Bước cuối cùng là hiển thị dữ liệu thành bốn biểu đồ bánh rán tương tác, mỗi biểu đồ cho mỗi loại. Nhân tiện, biểu đồ bánh rán hoặc bánh là một cách tuyệt vời để hiển thị so sánh và các tác phẩm trong nháy mắt; Có nhỏ gọn và dễ hiểu, đó là lý do tại sao chúng thường được sử dụng cho bảng điều khiển.

Bước hợp lý tiếp theo là chia nhỏ ý tưởng thành các thành phần nhỏ, giúp tôi dễ dàng viết mã hơn và duy trì từng thành phần. Sau một vài phác thảo và tối ưu hóa, tôi đã kết thúc với bảy thành phần:

  1. Thành phần dữ liệu : để lưu dữ liệu được thu thập từ trang web EIA.
  2. Xử lý dữ liệu : Để thêm dữ liệu sau khi người dùng chọn.
  3. Mẫu biểu đồ : Để thiết lập cấu hình của biểu đồ tương tác theo yêu cầu của thư viện Highcharts.
  4. Thành phần lựa chọn phạm vi : Để xử lý các bộ chọn ngày được sử dụng bởi người dùng.
  5. Mô-đun biểu đồ : Để hiển thị các biểu đồ sau mỗi phạm vi được người dùng chọn.
  6. Thành phần bảng điều khiển : Để thu thập và hiển thị tất cả các biểu đồ trên một container.
  7. Thành phần ứng dụng : Để tập hợp tất cả các thành phần và chạy bảng điều khiển.

Sau đó, tôi chia dự án của mình thành bảy thành phần: bốn thành phần React.js ( màu tím ) và ba mô-đun (màu xanh lá cây). Tiêu chí của tôi rất đơn giản; nếu có bất cứ điều gì để kết xuất, thành phần sẽ trở thành thành phần React.js, nếu không, nó chỉ là một mô-đun JavaScript tiêu chuẩn không có kết xuất, chỉ là một loạt các đối tượng hoặc hàm để xử lý dữ liệu.

Tôi đã phải thêm Highcharts React Wrapper ( màu xanh ) vào kiến ​​trúc để trực quan hóa và để biết nơi tôi phải thêm thư viện vào dự án của mình. Và vì kết xuất biểu đồ sẽ nằm trong thành phần biểu đồ, tôi đã nhập Highcharts React Wrapper vào thành phần đó.

Mã hóa phần thú vị

Sau khi tôi thiết lập kiến ​​trúc, tôi đã tạo một dự án mới bằng cách sử dụng ứng dụng Tạo phản ứng; sau đó tôi đã thêm các thành phần thư mục nơi tôi tạo một tệp cho mỗi thành phần. Để tách các thành phần React.js khỏi các mô-đun khác, tôi bắt đầu chữ cái đầu tiên của mỗi tệp thành phần React.js bằng chữ hoa; đó là một cách thực hành tốt để nhanh chóng nhận ra tệp nào làm gì vì nó giúp nhập trực quan và giảm bất kỳ sự mơ hồ nào giữa các tệp.

Kiểm tra bên dưới cấu trúc tệp dự án:

Hãy khám phá từng thành phần theo chiều sâu:

Dữ liệu

Mô-đun dữ liệu có một đối tượng data, trong đó tôi lưu trữ dữ liệu về từng nguồn năng lượng trong một đối tượng chuyên dụng, sau đó tôi xuất đối tượng databằng cách sử dụng export default data:

const data = {
 coal: {
   2001: 1903955,
...
 },
 pliquids: {
   2001: 114646,
...
 },
 pcoke: {
   2001: 10235,
...
 },
 ngas: {
   2001: 639129,
...
 },
 ogas: {
   2001: 9040,
...
 },
 nuclear: {
   2001: 768825,
...
 },
 chydroelectric: {
   2001: 216962,
...
 },
 wind: {
   2001: 6737,
...,
   2015: 93876
 },
 solar: {
   2001: 543,
...
 },
 geothermal: {
   2001: 13740,
...
 },
 biomass: {
   2001: 49749,
 ...
 },
 wood: {
   2001: 35199,
...
 },
 otherbio: {
   2001: 14549,
...
 }
};

export default data;

Xử lí dữ liệu

Mô-đun này nhập dữ liệu từ mô-đun dữ liệu sau đó chuyển dữ liệu có tham số yearFromyearTodưới dạng tham số cho hàm mũi tên dataProcessing.

import data from './data';
let dataProcessing = (yearFrom, yearTo) => {
...

Hàm tính toán lượng năng lượng được tạo ra trong phạm vi ngày cho mỗi nguồn năng lượng.

 if (yearFrom < yearTo) {
   let coal = 0,
     pliquids = 0,
     pcoke = 0,
     ngas = 0,
     ogas = 0,
     nuclear = 0,
     chydroelectric = 0,
     wind = 0,
     solar = 0,
     geothermal = 0,
     biomass = 0,
     wood = 0,
     otherbio = 0;
   for (let i = yearFrom; i < yearTo; i++) {
     coal += data.coal[i];
     pliquids += data.pliquids[i];
     pcoke += data.pcoke[i];
     ngas += data.ngas[i];
     ogas += data.ogas[i];
     nuclear += data.nuclear[i];
     chydroelectric += data.chydroelectric[i];
     wind += data.wind[i];
     solar += data.solar[i];
     geothermal += data.geothermal[i];
     biomass += data.biomass[i];
     wood += data.wood[i];
     otherbio += data.otherbio[i];
   }

Dữ liệu tính toán được lưu trong bốn đối tượng tùy thuộc vào bản chất của nguồn năng lượng:

 fossilFuelData = [
     { name: 'coal', y: coal },
     { name: 'Petroleum Liquids', y: pliquids },
     { name: 'Petroleum Coke', y: pcoke },
     { name: 'Natural gas', y: ngas },
     { name: 'Other Gases', y: ogas }
   ];

   hydroElectricData = [
     { name: 'Nuclear', y: nuclear },
     { name: 'Conventional Hydroelectric', y: chydroelectric }
   ];

   biomassData = [
     { name: 'Biomass', y: biomass },
     { name: 'Wood', y: wood },
     { name: 'Otherbio', y: otherbio }
   ];

   renewableEnergyData = [
     { name: 'Wind', y: wind },
     { name: 'Solar', y: solar },
     { name: 'Geothermal', y: geothermal }
   ];

Hàm này cũng xử lý một thông báo để chỉ định cho người dùng chọn phạm vi và để chắc chắn rằng giá trị yearFromnày luôn nhỏ hơn hoặc bằng yearTo.

Bản mẫu

Bảng điều khiển có bốn biểu đồ bánh rán tương tác, vì vậy thay vì tạo riêng từng biểu đồ, tôi thiết lập một mô-đun mẫu theo cấu trúc thư viện Highcharts, sau đó sử dụng nó trong mô-đun ứng dụng để tạo biểu đồ.

const template = {
 userConfig: {
   tooltip: {
     pointFormat: "{point.y} thousand megawatthours"
   },
   plotOptions: {
     pie: {
       showInLegend: true,
       innerSize: "60%",
       dataLabels: {
         enabled: false,
         distance: -14,
         color: "white",
         style: {
           fontweight: "bold",
           fontsize: 50
         }
       }
     }
   }
 },
 yearFrom: "2001",
 yearTo: "2015",
 msg: "Select the range"
};

export default template;

Như bạn có thể thấy, mẫu có cấu hình của biểu đồ Highchart tiêu chuẩn chính như tooltipplotOptions.

Lựa chọn

Tệp này là thành phần React.js; nó kết xuất các thành phần chọn cho phép người dùng chọn phạm vi ngày.

Đối với thành phần này, tôi sử dụng Bootstrap để tạo kiểu cho các thành phần, bạn có thể tự do đưa ra phong cách của riêng mình, nhưng một lần nữa vì mục đích duy trì, tôi quyết định đi đến một thư viện kiểu dáng tiêu chuẩn.

Đồ thị

Các Chart.jstập tin là một thành phần React.js; nó hiển thị các biểu đồ mỗi khi có bản cập nhật.

Yếu tố chính trong thành phần này là componentDidUpdate(prevProps, prevState)phương thức; Tôi sử dụng nó để kiểm tra xem có bản cập nhật nào không trước khi tìm nạp các tham số của biểu đồ mới, sau đó chuyển các tham số đó cho state thành phần của Char  .

componentDidUpdate(prevProps, prevState) {
    if (this.props.data !== prevProps.data) {
      this.setState({
        chartData: {
          ...this.state.chartData,
          subtitle: {
            text:
              (
                this.props.data.reduce((accumulator, obj) => accumulator + obj.y,0) / 1000).toFixed(2) + " TWh"
          },
          series: [
            {
              data: this.props.data
            }
          ]
        }
      });
    }
  }

bảng điều khiển

Trong thành phần này, tôi kết xuất tất cả các biểu đồ một cách linh hoạt bằng cách sử dụng đoạn mã sau:

{this.props.charts && this.props.charts.map(chart => {
           return (
             <div className="col-xs-12 col-sm-6 mb-2" key={i}>
               <Chart
                 data={chart.serie}
                 userConfig={this.props.userConfig}
                 titleName={chart.title}
               />
             </div>
           );
         })}

Ứng dụng

Cuối cùng, tôi tập hợp tất cả các thành phần React.js trong thành phần chính này  App.js, để hiển thị toàn bộ bảng điều khiển.

Trong thành phần này, có một chức năng mũi tên handleChangeYear:

handleChangeYear = e => {
              this.setState({
                  [e.target.name]: e.target.value
              });
};

Hàm xử lý các sự kiện trên các thành phần được chọn và lưu phạm vi thời gian mới ở trạng thái của thành phần App.js; quá trình này kích hoạt phương thứccomponentDidUpdate(prevProps, prevState)

 componentDidUpdate(prevProps, prevState) {
   if (prevState.yearFrom !== this.state.yearFrom) {
     this.handleChangeSelect();
   }
   if (prevState.yearTo !== this.state.yearTo) {
     this.handleChangeSelect();
   }
 }

Thành phần componentDidUpdate(prevProps, prevState)gọi handleChangeSelect()để xử lý dữ liệu (trong mô-đun xử lý dữ liệu), sau đó cập nhật biểu đồ. Bước cuối cùng trong toàn bộ quá trình này là hiển thị các biểu đồ mới trên bảng điều khiển.

Trong App.jstệp, tôi cũng sử dụng Bootstrap để định kiểu các thành phần khác nhau được hiển thị trên bảng điều khiển.

Khi dự án đã hoàn thành, tôi nhận ra rằng phần khó khăn nhất và tốn thời gian nhất là tìm ra kiến ​​trúc; Sau đó, phần mã là đơn giản. Tôi cũng đã có một số thách thức với handleChangeYear; Tôi đã phải sử dụng ký hiệu khung để chắc chắn rằng tôi đang xử lý nút bên phải.

Vâng, đó là nó. Tôi hy vọng kinh nghiệm của tôi sẽ hữu ích cho bạn, và thoải mái chia sẻ kinh nghiệm của bạn với trình bao bọc, hoặc để lại nhận xét / câu hỏi bên dưới, tôi sẽ vui lòng trả lời bạn.

Hữu ích 0 Chia sẻ Viết bình luận 0
Đã xem 5951