HomeLập trìnhJavaScriptHướng dẫn biểu...

Hướng dẫn biểu đồ đường – Cách tạo biểu đồ đường trong JavaScript


Trực quan hóa dữ liệu là một lĩnh vực rộng lớn với rất nhiều loại biểu đồ khác nhau để tìm hiểu và tạo.

Nhưng có một số biểu đồ cơ bản, thường xanh mà mọi nhà thiết kế dữ liệu và nhà phát triển web xử lý phân tích nên biết cách xây dựng.

Một trong số họ là một Biểu đồ đường (hoặc đồ thị đường). Nó chủ yếu được thiết kế để biểu diễn dữ liệu theo thời gian.

Bạn có thể làm theo hướng dẫn này để tìm hiểu cách tạo nhanh các biểu đồ đường tương tác (và đường bậc) đẹp mắt bằng cách sử dụng JavaScript. Chúng ta sẽ xem xét một số ví dụ thú vị và xây dựng chúng từng bước một, điều này sẽ làm cho quá trình trở nên rõ ràng và thú vị.

Để thuận tiện cho bạn, bạn có thể tìm thấy tất cả chúng trên CodePen để bạn có thể tiếp tục chơi với mã biểu đồ đường mà không bị giới hạn.

Bộ dữ liệu của chúng tôi

Hai thập kỷ qua không có gì là ngoạn mục trong thế giới quần vợt. Bộ ba vĩ đại — Roger Federer, Rafael Nadal và Novak Djokovic — đã giành được tổng cộng 63 (trong số 78) giải Grand Slam đáng kinh ngạc. Đây là những giải vô địch danh giá nhất.

Tôi quyết định vạch ra sự cạnh tranh nổi bật của họ. Vì vậy, các biểu đồ đường JS trong hướng dẫn này sẽ trực quan hóa cuộc đua danh hiệu Grand Slam của Big Three. Và quả giao bóng đầu tiên đã đến!

Nói chung, toàn bộ quá trình tạo bất kỳ biểu đồ nào trong JavaScript được chia thành bốn bước và biểu đồ đường cũng không ngoại lệ:

  1. Tạo một trang HTML với một vùng chứa.
  2. Bao gồm các tệp JavaScript.
  3. Thêm dữ liệu của bạn.
  4. Mã một trực quan hóa.

Bây giờ chúng ta hãy đi qua từng bước này.

1. Tạo trang HTML với vùng chứa

Để bắt đầu, bạn cần một nơi mà bạn muốn biểu đồ của mình xuất hiện.

Nếu bạn chưa có, hãy tạo một trang web cơ bản. Sau đó, tạo vùng chứa cho biểu đồ đường — thêm phần tử cấp khối HTML và cung cấp cho nó một ID duy nhất để tham khảo thêm.

Đây là những gì một trang như vậy có thể trông giống như:

<html>
  <head>
    <title>Line Chart JS</title>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>
    <div id="container"></div>
  </body>
</html>

Các widthheight các tham số của phần tử được đặt là 100%. Do đó, biểu đồ đường sẽ hiển thị trên toàn bộ trang web. Tất nhiên, bạn có thể đặt cài đặt kiểu theo sở thích và nhu cầu của riêng mình.

2. Bao gồm các tệp JavaScript

Tiếp theo, bao gồm tất cả các tệp JavaScript mà chúng tôi sẽ sử dụng để tạo biểu đồ đường, trong <head> tiết diện.

Có rất nhiều thư viện biểu đồ JavaScript khác nhau cho phép bạn trực quan hóa dữ liệu một cách nhanh chóng và đơn giản. Nhiều người trong số họ hỗ trợ biểu đồ đường và bạn có thể chọn cái này hay cái khác tùy thuộc vào yêu cầu dự án của bạn.

Với mục đích minh họa, trong hướng dẫn này, tôi đang sử dụng AnyChart JS Charts. Nó linh hoạt, đi kèm với tài liệu biểu đồ phong phú và tài liệu tham khảo API và bạn có thể sử dụng nó miễn phí (trừ khi bạn đang xây dựng thứ gì đó cho doanh nghiệp.)

Đọc thêm  Ví dụ đối sánh Regex JavaScript – Cách sử dụng JS Thay thế trên chuỗi

Đối với biểu đồ đường, tôi thêm mô-đun “Cơ sở” từ CDN. (Tất nhiên, bạn có thể tải xuống, đặt nó vào một thư mục trên trang web của mình và sử dụng liên kết của riêng bạn trong trường hợp đó.)

<html>
  <head>
    <title>Line Chart JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // JavaScript code for the line chart.
    </script>
  </body>
</html>

Mã JavaScript cho biểu đồ đường sẽ được chèn vào giữa <script></script> các thẻ nằm trong <body> phần (bạn có thể đặt chúng trong phần <head> phần nếu bạn muốn).

3. Thêm dữ liệu của bạn

Sau đó, thêm dữ liệu bạn muốn trực quan hóa trong biểu đồ đường của mình.

Tôi đếm tất cả các danh hiệu Grand Slam đơn mà Federer, Nadal và Djokovic giành được theo năm. Tôi sẽ thêm nó giống như một mảng của các mảng.

Nếu bạn thích các định dạng khác trong trường hợp cụ thể của mình, chẳng hạn như JSON, XML, CSV hoặc định dạng khác, hãy kiểm tra các cách làm việc với dữ liệu.

var data = [
  ["2003", 1, 0, 0],
  ["2004", 4, 0, 0],
  ["2005", 6, 0, 0],
  ["2006", 9, 1, 0],
  ["2007", 12, 2, 0],
  ["2008", 13, 5, 1],
  ["2009", 15, 6, 1],
  ["2010", 16, 9, 1],
  ["2011", 16, 10, 4],
  ["2012", 17, 11, 5],
  ["2013", 17, 13, 6],
  ["2014", 17, 14, 7],
  ["2015", 17, 14, 10],
  ["2016", 17, 14, 12],
  ["2017", 19, 16, 12],
  ["2018", 20, 17, 14],
  ["2019", 20, 19, 16],
  ["2020", 20, 20, 17],
  ["2021", 20, 20, 20],
  ["2022", 20, 22, 20]
];

Trong mỗi mảng, năm là tham số đầu tiên (cột #0). Sau đó là số lượng danh hiệu mà ba người chơi giành được sau đó (cộng dồn cho mỗi người).

4. Viết mã trực quan hóa

Bây giờ, phần khởi động đã xong, và tòa án đã sẵn sàng. Vì vậy, hãy bắt đầu trận đấu và thực hiện một số mã JavaScript nhanh!

Đầu tiên, thêm anychart.onDocumentReady() như hình dưới đây:

<script>
  anychart.onDocumentReady(function() {
    // The main JS line charting code will be here.
  });
</script>

Mọi thứ khác đi vào bên trong chức năng đó.

Vì vậy, thứ hai, bao gồm dữ liệu (từ bước trước).

Thứ ba, tạo một bộ dữ liệu và ánh xạ nó cho từng chuỗi (một cho mỗi người chơi):

// create a data set
var dataSet = anychart.data.set(data);

// map the data for all series
var firstSeriesData = dataSet.mapAs({x: 0, value: 1});
var secondSeriesData = dataSet.mapAs({x: 0, value: 2});
var thirdSeriesData = dataSet.mapAs({x: 0, value: 3});

Thứ tư, tạo một thể hiện biểu đồ đường và ba chuỗi với dữ liệu được ánh xạ:

// create a line chart
var chart = anychart.line();

// create the series and name them
var firstSeries = chart.line(firstSeriesData);
firstSeries.name("Roger Federer");
var secondSeries = chart.line(secondSeriesData);
secondSeries.name("Rafael Nadal");
var thirdSeries = chart.line(thirdSeriesData);
thirdSeries.name("Novak Djokovic");

Thứ năm, để làm cho nó rõ ràng trong nháy mắt những gì được hiển thị trong biểu đồ đường, một ý tưởng hay là thêm chú thích và tiêu đề:

// add a legend
chart.legend().enabled(true);
  
// add a title
chart.title("Big Three's Grand Slam Title Race");

Cuối cùng, hãy tham chiếu ID phần tử vùng chứa và vẽ biểu đồ đường kết quả:

// specify where to display the chart
chart.container("container");
  
// draw the resulting chart
chart.draw();

Đó là nó! Biểu đồ đường đầy đủ chức năng được tạo bằng JS đã sẵn sàng. Cảm thấy giống như một chiến thắng liên tiếp, phải không?

Biểu đồ nhiều đường cơ bản, JS.
Biểu đồ đường hiển thị cuộc đua giành danh hiệu Big 3 – được tạo bằng AnyChart

Hãy xem phiên bản cơ bản này của biểu đồ đường có mã HTML/CSS/JS đầy đủ trên CodePen. Đề phòng, đây cũng là mã:

<html>
  <head>
    <title>Line Chart JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
  
        // add data
        var data = [
          ["2003", 1, 0, 0],
          ["2004", 4, 0, 0],
          ["2005", 6, 0, 0],
          ["2006", 9, 1, 0],
          ["2007", 12, 2, 0],
          ["2008", 13, 5, 1],
          ["2009", 15, 6, 1],
          ["2010", 16, 9, 1],
          ["2011", 16, 10, 4],
          ["2012", 17, 11, 5],
          ["2013", 17, 13, 6],
          ["2014", 17, 14, 7],
          ["2015", 17, 14, 10],
          ["2016", 17, 14, 12],
          ["2017", 19, 16, 12],
          ["2018", 20, 17, 14],
          ["2019", 20, 19, 16],
          ["2020", 20, 20, 17],
          ["2021", 20, 20, 20],
          ["2022", 20, 22, 20]
        ];
  
        // create a data set
        var dataSet = anychart.data.set(data);

        // map the data for all series
        var firstSeriesData = dataSet.mapAs({x: 0, value: 1});
        var secondSeriesData = dataSet.mapAs({x: 0, value: 2});
        var thirdSeriesData = dataSet.mapAs({x: 0, value: 3});

        // create a line chart
        var chart = anychart.line();

        // create the series and name them
        var firstSeries = chart.line(firstSeriesData);
        firstSeries.name("Roger Federer");
        var secondSeries = chart.line(secondSeriesData);
        secondSeries.name("Rafael Nadal");
        var thirdSeries = chart.line(thirdSeriesData);
        thirdSeries.name("Novak Djokovic");

        // add a legend
        chart.legend().enabled(true);
  
        // add a title
        chart.title("Big Three's Grand Slam Title Race");
  
        // specify where to display the chart
        chart.container("container");
  
        // draw the resulting chart
        chart.draw();
  
      });
    </script>
  </body>
</html>

Biểu đồ đường cơ bản mà chúng tôi đã tạo bằng cách thực hiện theo bốn bước ở trên trông đã ổn. Nhưng nếu bạn muốn tùy chỉnh nó thì sao?

Đọc thêm  Hướng dẫn cơ bản về các phương thức mảng JavaScript

Hãy để tôi chỉ cho bạn cách thực hiện một số thay đổi theo cách nhanh chóng và dễ dàng.

1. Đặt tên cho các trục

Luôn luôn là một ý tưởng hay khi giải thích mỗi trục của biểu đồ đường biểu thị điều gì, ngay cả khi nó có vẻ khá rõ ràng. Để thêm tiêu đề cho cả hai trục X và Y, hãy sử dụng như sau:

chart.yAxis().title("Titles won");
chart.xAxis().title("Year");

2. Tùy chỉnh các điểm đánh dấu

Theo mặc định, khi bạn di chuyển con trỏ chuột qua biểu đồ, các điểm đánh dấu sẽ hiển thị trên mỗi chuỗi dòng và hình dạng của chúng sẽ khác nhau. Tại sao không cho các điểm đánh dấu hình dạng giống nhau? Ngoài ra, sẽ rất tuyệt nếu làm cho chúng nhỏ hơn.

Hãy xem cách bạn có thể tùy chỉnh giao diện của các điểm đánh dấu chuỗi dòng:

firstSeries.hovered().markers().type("circle").size(4);
secondSeries.hovered().markers().type("circle").size(4);
thirdSeries.hovered().markers().type("circle").size(4);

3. Kích hoạt dấu thập

Đường chéo là một cặp đường vuông góc theo con trỏ chuột để giúp bạn hiểu rõ hơn về giá trị X và Y tại bất kỳ điểm nào hiện được di chuột.

Trong trường hợp này, chỉ cần một dòng như vậy, dọc, để đánh dấu năm là đủ. Đây là cách nó được thực hiện:

chart.crosshair().enabled(true).yStroke(null).yLabel(false);

4. Thay đổi vị trí tooltip

Hiện tại, chú giải công cụ đang theo con trỏ chuột. Nhưng trong tình huống này, sẽ tốt hơn nếu làm cho nó dính vào các điểm dữ liệu.

Để đạt được loại hành vi đó, chỉ cần xác định chế độ vị trí của chú giải công cụ biểu đồ đường là “điểm” và tinh chỉnh các cài đặt vị trí khác theo ý thích của bạn. Ví dụ:

chart.tooltip().positionMode("point");
chart.tooltip().position("right").anchor("left-center").offsetX(5).offsetY(5);

Hãy xem biểu đồ đường JavaScript trông như thế nào sau tất cả các tùy chỉnh này. (Xem trực tiếp với mã đầy đủ trên CodePen.)

Biểu đồ đường tùy chỉnh, JS.

5. Thay đổi màu sắc

Một trong những cách đơn giản nhưng hiệu quả nhất để cá nhân hóa hình ảnh hóa dữ liệu là sử dụng màu sắc.

Đoạn mã dưới đây thay đổi màu đường kẻ của mỗi tay vợt thành màu chính của giải Grand Slam mà anh ta giành được nhiều lần nhất: màu tím của Wimbledon dành cho Federer, màu nâu của Pháp Mở rộng dành cho Nadal và màu xanh lam của Úc Mở rộng dành cho Djokovic. Ngoài ra, độ dày của các dòng được điều chỉnh.

firstSeries.normal().stroke("#7b60a2", 2.5);
secondSeries.normal().stroke("#db7346", 2.5);
thirdSeries.normal().stroke("#43a7dc", 2.5);

6. Cải thiện tiêu đề và văn bản chú giải

Những thay đổi cuối cùng mà tôi muốn trình bày trong hướng dẫn này — và làm cho biểu đồ đường tương tác hoàn chỉnh — là các tùy chỉnh tiêu đề và chú giải.

Bạn có thể thêm phụ đề để cung cấp thêm ngữ cảnh và bạn có thể tạo kiểu văn bản hấp dẫn hơn bằng một vài chỉnh sửa nhanh với sự trợ giúp của HTML:

chart
  .title()
  .enabled(true)
  .useHtml(true)
  .text(
    '<span style="color: #006331; font-size:20px;">Big Three&#39;s Grand Slam Title Race</span>' +
      '<br/><span style="font-size: 16px;">(Triumphs at Australian Open, French Open, Wimbledon, U.S. Open)</span>'
  );

Đối với chú giải biểu đồ, thật dễ dàng để sửa đổi kích thước phông chữ và phần đệm:

chart.legend().enabled(true).fontSize(14).padding([10, 0, 10, 0]);

Xem những gì chúng tôi đã có! (Xem biểu đồ đường JS này trên CodePen.)

Đọc thêm  Cách tạo con trỏ chuột tùy chỉnh bằng CSS và JavaScript
Biểu đồ đường nâng cao được tạo bằng JavaScript.

Cách tạo biểu đồ đường bậc

Cũng giống như việc một trận đấu quần vợt diễn ra trong năm setter luôn thú vị hơn, đây là một thứ bổ sung để làm cho hướng dẫn này và trực quan hóa biểu đồ đường này thậm chí còn tuyệt vời hơn.

Từ quan điểm trực quan hóa dữ liệu, biểu đồ đường bậc sẽ thực sự hoạt động tốt hơn trong trường hợp này. Và chúng ta có thể tạo một cái chỉ với một sửa đổi nhỏ.

Chỉ cần thay đổi line() chức năng để stepLine() và biểu đồ đường của bạn sẽ trở thành biểu đồ đường từng bước:

// create a stepped line chart
var chart = anychart.stepLine();

// create the series and name them
var firstSeries = chart.stepLine(firstSeriesData);
firstSeries.name("Roger Federer");
var secondSeries = chart.stepLine(secondSeriesData);
secondSeries.name("Rafael Nadal");
var thirdSeries = chart.stepLine(thirdSeriesData);
thirdSeries.name("Novak Djokovic");

Thưởng thức biểu đồ dạng bậc được hỗ trợ bởi JavaScript trực quan hóa cuộc đua danh hiệu Grand Slam giữa Big Three trong môn quần vợt. (Vui lòng khám phá và tiếp tục chơi với mã nguồn đầy đủ của nó trên CodePen.)

Biểu đồ đường bậc thang thể hiện cuộc đua danh hiệu Grand Slam của Federer, Nadal và Djokovic.  Javascript HTML5.

Và đây là mã đầy đủ:

<html>
  <head>
    <title>Line Chart JS</title>
    <script src="https://cdn.anychart.com/releases/8.11.0/js/anychart-base.min.js"></script>
    <style type="text/css">      
      html, body, #container { 
        width: 100%; height: 100%; margin: 0; padding: 0; 
      } 
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      anychart.onDocumentReady(function () {
  
        // add data
        var data = [
          ["2003", 1, 0, 0],
          ["2004", 4, 0, 0],
          ["2005", 6, 0, 0],
          ["2006", 9, 1, 0],
          ["2007", 12, 2, 0],
          ["2008", 13, 5, 1],
          ["2009", 15, 6, 1],
          ["2010", 16, 9, 1],
          ["2011", 16, 10, 4],
          ["2012", 17, 11, 5],
          ["2013", 17, 13, 6],
          ["2014", 17, 14, 7],
          ["2015", 17, 14, 10],
          ["2016", 17, 14, 12],
          ["2017", 19, 16, 12],
          ["2018", 20, 17, 14],
          ["2019", 20, 19, 16],
          ["2020", 20, 20, 17],
          ["2021", 20, 20, 20],
          ["2022", 20, 22, 20]
        ];
  
        // create a data set
        var dataSet = anychart.data.set(data);

        // map the data for all series
        var firstSeriesData = dataSet.mapAs({x: 0, value: 1});
        var secondSeriesData = dataSet.mapAs({x: 0, value: 2});
        var thirdSeriesData = dataSet.mapAs({x: 0, value: 3});

        // create a stepped line chart
        var chart = anychart.stepLine();

        // create the series and name them
        var firstSeries = chart.stepLine(firstSeriesData);
        firstSeries.name("Roger Federer");
        var secondSeries = chart.stepLine(secondSeriesData);
        secondSeries.name("Rafael Nadal");
        var thirdSeries = chart.stepLine(thirdSeriesData);
        thirdSeries.name("Novak Djokovic");

        // add a legend and customize it
        chart.legend().enabled(true).fontSize(14).padding([10, 0, 10, 0]);
  
        // add a title and customize it
        chart
          .title()
          .enabled(true)
          .useHtml(true)
          .text(
            '<span style="color: #006331; font-size:20px;">Big Three&#39;s Grand Slam Title Race</span>' +
              '<br/><span style="font-size: 16px;">(Triumphs at Australian Open, French Open, Wimbledon, U.S. Open)</span>'
          );
  
        // name the axes
        chart.yAxis().title("Titles won");
        chart.xAxis().title("Year");
  
        // customize the series markers
        firstSeries.hovered().markers().type("circle").size(4);
        secondSeries.hovered().markers().type("circle").size(4);
        thirdSeries.hovered().markers().type("circle").size(4);
  
        // turn on crosshairs and remove the y hair
        chart.crosshair().enabled(true).yStroke(null).yLabel(false);
  
        // change the tooltip position
        chart.tooltip().positionMode("point");
        chart.tooltip().position("right").anchor("left-center").offsetX(5).offsetY(5);
  
        // customize the series stroke in the normal state
        firstSeries.normal().stroke("#7b60a2", 2.5);
        secondSeries.normal().stroke("#db7346", 2.5);
        thirdSeries.normal().stroke("#43a7dc", 2.5);
  
        // specify where to display the chart
        chart.container("container");
  
        // draw the resulting chart
        chart.draw();
  
      });
    </script>
  </body>
</html>

Như bạn có thể thấy trong hướng dẫn này, việc tạo biểu đồ đường tương tác (và đường bậc) bằng JavaScript có thể khá đơn giản. Hãy cho tôi biết nếu bạn có bất kỳ câu hỏi hoặc gợi ý nào.

Thật là động lực để xem làm thế nào những người vĩ đại này đã đạt được rất nhiều trong cuộc sống chuyên nghiệp của họ.

Hãy tận dụng nguồn cảm hứng này để tiến lên trong lĩnh vực phát triển trực quan hóa dữ liệu bằng cách xây dựng nhiều biểu đồ và đồ thị hơn nữa (và tất cả đều tuyệt vời hơn nữa)!



Zik.vn – Biên dịch & Biên soạn Lại

spot_img

Create a website from scratch

Just drag and drop elements in a page to get started with Newspaper Theme.

Buy Now ⟶

Bài viết liên quang

DMCA.com Protection Status