HomeLập trìnhJavaScriptCách tạo biểu...

Cách tạo biểu đồ thanh phân kỳ bằng thư viện biểu đồ JavaScript


Bài viết này là hướng dẫn từng bước chỉ cho bạn cách xây dựng biểu đồ phạm vi JavaScript tương tác trực quan hóa 20 năm thành tích của LA Lakers với Kobe Bryant.

Năm 2020 khá sâu sắc vì những lý do rõ ràng. Nhưng ngay cả trước khi xảy ra đại dịch, một năm đã bắt đầu bằng một nốt nhạc buồn với cái chết của huyền thoại bóng rổ Kobe Bryant. Anh ấy là một vận động viên ngôi sao NBA đã chơi 20 năm với một và chỉ một đội – Los Angeles Lakers.

Nhớ về Kobe một năm sau vụ tai nạn khủng khiếp đó, tôi tự hỏi Lakers đã thể hiện như thế nào trong kỷ nguyên hai thập kỷ của anh ấy. Vì vậy, tôi đã hình dung điều đó trong Biểu đồ thanh phân kỳ tương tác với sự trợ giúp của JavaScript thuần túy.

Nghĩ rằng dự án này có thể hữu ích cho những người mới sử dụng biểu đồ web, tôi cũng đã ghi lại toàn bộ quá trình và thực hiện một hướng dẫn. Kiểm tra nó ra!

Biểu đồ thanh phân kỳ là gì?

Đầu tiên, tôi sẽ giải thích ngắn gọn cho bạn về biểu đồ thanh phân kỳ là gì và sau đó chúng ta sẽ đi sâu vào phần hướng dẫn.

Biểu đồ thanh phân kỳ hiển thị hai hoặc nhiều biện pháp được vẽ từ đường cơ sở ở giữa, kéo dài sang phải và trái (thanh phạm vi ngang) hoặc trên cùng và dưới cùng (cột phạm vi dọc).

Điểm mấu chốt của việc trực quan hóa dữ liệu trong các biểu đồ phân kỳ như vậy là tạo điều kiện thuận lợi cho việc so sánh nhiều danh mục bằng cách hiển thị chúng dựa trên điểm giữa phân nhánh.

Trong hướng dẫn này, tôi sử dụng kỹ thuật biểu đồ thanh phân kỳ để giới thiệu các trận thắng và thua của LA Lakers trong suốt 20 năm sự nghiệp của Kobe Bryant.

Dưới đây là một cái nhìn sơ bộ về biểu đồ cuối cùng để giúp bạn sẵn sàng bắt đầu trò chơi! Hãy theo dõi tôi để tìm hiểu cách tôi tạo biểu đồ thanh dải đẹp này bằng JavaScript.

js-diverging-bar-chart

Cách xây dựng biểu đồ thanh phân kỳ JavaScript trong 4 bước cơ bản

Hiện có nhiều thư viện JavaScript cung cấp mã JS được viết sẵn cho các hàm thường cần có thể giúp quá trình trực quan hóa dữ liệu tương tác trở nên khá nhanh chóng và đơn giản.

Tôi đã chọn một biểu đồ có tên là AnyChart để tạo biểu đồ thanh phân kỳ này. Thư viện biểu đồ JS này dường như hỗ trợ các biểu đồ phạm vi (đặc biệt hữu ích trong trường hợp này) và cũng đủ linh hoạt để thực hiện những gì tôi muốn.

Ngoài ra, khá dễ dàng để bắt đầu với AnyChart ngay cả đối với người mới bắt đầu vì có nhiều ví dụ sẵn sàng sử dụng và nó có tài liệu chuyên sâu.

Tất nhiên, có kỹ năng HTML và JavaScript tốt sẽ mang lại cho bạn lợi thế khi trực quan hóa dữ liệu trên web. Nhưng dù sao đi nữa, phần tốt nhất về việc sử dụng các thư viện biểu đồ tốt là chúng làm cho việc tạo các biểu đồ tương tác trở nên khá đơn giản ngay cả khi không có nhiều kinh nghiệm.

Toàn bộ quá trình tạo bất kỳ biểu đồ JS nào, bao gồm biểu đồ thanh phân kỳ như biểu đồ này, có thể được chia thành bốn bước cơ bản:

  1. Tạo một trang HTML.
  2. Tham khảo các tệp JS cần thiết.
  3. Đặt dữ liệu.
  4. Viết mã JS cho biểu đồ.

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

1. Tạo một trang HTML cơ bản

Điều đầu tiên chúng ta cần làm là tạo một trang HTML cơ bản. Hãy đặt cho nó một tiêu đề và tạo một phần tử khối HTML để giữ biểu đồ. Để xác định điều này <div> sau này trong mã, chúng ta cũng nên đặt cho nó một thuộc tính id (hãy để nó là “vùng chứa”).

<html>
  <head>
    <title>JavaScript Diverging Bar Chart</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>

Lưu ý rằng có thể chỉ định tham số chiều rộng và chiều cao bên trong <style> khối để sửa đổi không gian mà biểu đồ của bạn sẽ chiếm. Tôi đã đặt 100% vào cả hai tham số để biểu đồ lấp đầy toàn bộ trang.

2. Bao gồm các tệp JavaScript cần thiết

Tiếp theo, chúng ta cần thêm tập lệnh thư viện biểu đồ sẽ giúp tạo trực quan hóa dữ liệu. Vì chúng tôi đang làm việc với thư viện AnyChart ở đây, hãy bao gồm các tệp tương ứng từ CDN của nó. (Hãy nhớ rằng bạn luôn có thể tải xuống tập lệnh nếu muốn.)

Đọc thêm  parseInt() trong JavaScript – Ví dụ chuỗi JS thành Int

Đối với biểu đồ thanh phân kỳ, chúng ta cần tập lệnh mô-đun cơ sở sẽ được thêm vào <head> phần của trang HTML.

<html>
  <head>
    <title>JavaScript Diverging Bar Chart</title>
    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></script>
    <style type="text/css">
      html,
      body,
      #container {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>  
    <div id="container"></div>
    <script>
      // All the code for the JS diverging bar chart will come here
    </script>
  </body>
</html>

3. Thêm dữ liệu

Tôi muốn hình dung số trận thắng và thua của đội LA Lakers trong tất cả các mùa giải từ 1996 đến 2016. Vì vậy, tôi lấy dữ liệu từ trang web NBA và tạo một mảng có năm, số trận thắng và số trận thua.

Vì lượng dữ liệu không lớn nên chúng ta có thể thêm nó như thế này:

var winlossData = [
  [65, 17, "2015-16"],
  [61, 21, "2014-15"],
  [55, 27, "2013-14"],
  [37, 45, "2012-13"],
  [25, 41, "2011-12"],
  [25, 57, "2010-11"],
  [25, 57, "2009-10"],
  [17, 65, "2008-09"],
  [25, 57, "2007-08"],
  [40, 42, "2006-07"],
  [37, 45, "2005-06"],
  [48, 34, "2004-05"],
  [26, 56, "2003-04"],
  [32, 50, "2002-03"],
  [24, 58, "2001-02"],
  [26, 56, "2000-01"],
  [15, 67, "1999-00"],
  [19, 31, "1998-99"],
  [21, 61, "1997-98"],
  [26, 56, "1996-97"]
];

Bây giờ giai đoạn đã được thiết lập, hãy bắt đầu thử bằng cách thêm mã JavaScript sẽ tạo Biểu đồ thanh phân kỳ tương tác!

4. Viết mã JavaScript cho biểu đồ của bạn

Trước hết, chúng ta cần thêm một chức năng bao quanh tất cả mã JS, chức năng này đảm bảo rằng toàn bộ mã bên trong nó sẽ chỉ thực thi sau khi trang được tải.

<script>
  anychart.onDocumentReady(function() {
    // The place for the JS diverging bar chart code
  });
</script>

Nói chung, một biểu đồ thanh phân kỳ JS khá đơn giản để tạo và tôi sẽ hướng dẫn bạn qua từng hành động. Vì vậy, hãy sẵn sàng ngọ nguậy, chặn và bắn!

Đầu tiên, chúng tôi tạo một biểu đồ thanh và nhập dữ liệu, tất cả bên trong phần đính kèm anychart.onDocumentReady() chức năng.

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

// data
var winlossData = [
  [65, 17, "2015-16"],
  [61, 21, "2014-15"],
  [55, 27, "2013-14"],
  [37, 45, "2012-13"],
  [25, 41, "2011-12"],
  [25, 57, "2010-11"],
  [25, 57, "2009-10"],
  [17, 65, "2008-09"],
  [25, 57, "2007-08"],
  [40, 42, "2006-07"],
  [37, 45, "2005-06"],
  [48, 34, "2004-05"],
  [26, 56, "2003-04"],
  [32, 50, "2002-03"],
  [24, 58, "2001-02"],
  [26, 56, "2000-01"],
  [15, 67, "1999-00"],
  [19, 31, "1998-99"],
  [21, 61, "1997-98"],
  [26, 56, "1996-97"]
];

Tiếp theo, chúng ta tạo một hàm chấp nhận hai tham số — số cột và tên. Số cột cho biết cột trong tập dữ liệu và tên cho biết chuỗi. Trong trường hợp của chúng tôi, chúng tôi có hai chuỗi — một cho số lần thắng và một cho số lần thua.

Vì chúng ta muốn có một biểu đồ thanh phân kỳ, hãy lấy trung tâm và vẽ các thanh thắng ở bên phải và các thanh thua ở bên trái. Sau đó, chúng ta nên chuẩn bị tập dữ liệu bằng cách thêm tất cả các giá trị cần thiết thông qua vòng lặp ‘for’.

Đừng lo lắng nếu điều này nghe có vẻ hơi phức tạp. Đó chỉ là việc làm cho dữ liệu của chúng ta sẵn sàng để vẽ biểu đồ và khi xem đoạn mã bên dưới, bạn có thể sẽ thấy rằng tất cả đều hoàn toàn hợp lý.

Có hai điều nữa chúng ta cần đưa vào hàm. Chúng tôi xác định một chuỗi bằng hàm rangeBar và thêm một dòng để chỉ ra tên của chuỗi và một đường phân cách giữa các thanh bên trái và bên phải.

var createSeries = function (columnNumber, name) {
  var data = [];
  for (var i = 0; i < winlossData.length; i++) {
    var value = winlossData[i][columnNumber];
    var center = 0;
    if (name === "Wins") {
      data.push({
        x: winlossData[i][2],
        low: center,
        high: center + value,
        value: value
      });
    } else {
      data.push({
        x: winlossData[i][2],
        low: -center,
        high: -center - value,
        value: value
      });
    }
  }
    
  var series = chart.rangeBar(data);
  series.name(name);
};

Bây giờ, chúng ta tạo hai chuỗi với các đối số mong muốn bằng cách sử dụng hàm vừa xác định.

createSeries(0, "Losses");
createSeries(1, "Wins");

Đã đến giờ nghỉ giải lao và những phần phức tạp nhất đã kết thúc! Bây giờ chúng ta chỉ cần thiết lập biểu đồ.

Thêm tiêu đề vào biểu đồ thanh phân kỳ:

chart
  .title()
  .enabled(true)
  .text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");

Và bật chú thích của biểu đồ:

chart
  .legend()
  .enabled(true);

Để làm cho các khoản lãi và lỗ cho mỗi năm hiển thị liền kề với nhau, chúng ta nên chuyển đổi biểu đồ thanh nhiều chuỗi thành biểu đồ thanh xếp chồng lên nhau. Tiếp theo, để nhấn mạnh sự phân kỳ, hãy thêm một điểm đánh dấu dòng ở 0. Cuối cùng, chúng ta gán div vùng chứa và vẽ biểu đồ:

// create a stacked bar chart from the multi-series bar chart
chart.yScale().stackMode("value");

// set a container id for the chart
chart.container("container");
  
// initiate chart drawing
chart.draw();

Đó là tiếng còi và bạn đã có nó — một biểu đồ thanh phân kỳ tương tác rất cơ bản nhưng đầy đủ chức năng được tạo bằng JavaScript!

Đọc thêm  Các hàm toán học JavaScript được giải thích
ban đầu-chart-default-colors-1

Mặc dù Kobe có thể đã chơi ngoạn mục trong những trận đấu cuối cùng của sự nghiệp tại NBA, nhưng chúng ta có thể thấy rằng Lakers đã gặp khó khăn trong những năm cuối cùng của anh ấy với số trận thua nhiều hơn số trận thắng. Nhưng thành tích chung chắc chắn là thắng nhiều hơn thua.

Hãy xem phiên bản ban đầu này của biểu đồ thanh phân kỳ với mã JS/CSS/HTML đầy đủ trên CodePen.

<html>
  <head>
    <title>JavaScript Diverging Bar Chart</title>
    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></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 () {
  
      // create a bar chart
      var chart = anychart.bar();

      // data
      var winlossData = [
        [65, 17, "2015-16"],
        [61, 21, "2014-15"],
        [55, 27, "2013-14"],
        [37, 45, "2012-13"],
        [25, 41, "2011-12"],
        [25, 57, "2010-11"],
        [25, 57, "2009-10"],
        [17, 65, "2008-09"],
        [25, 57, "2007-08"],
        [40, 42, "2006-07"],
        [37, 45, "2005-06"],
        [48, 34, "2004-05"],
        [26, 56, "2003-04"],
        [32, 50, "2002-03"],
        [24, 58, "2001-02"],
        [26, 56, "2000-01"],
        [15, 67, "1999-00"],
        [19, 31, "1998-99"],
        [21, 61, "1997-98"],
        [26, 56, "1996-97"]
      ];

      // configure a function to create series
      var createSeries = function (columnNumber, name) {
        var data = [];
        for (var i = 0; i < winlossData.length; i++) {
          var value = winlossData[i][columnNumber];
          var center = 0;
          if (name === "Wins") {
            data.push({
              x: winlossData[i][2],
              low: center,
              high: center + value,
              value: value
            });
          } else {
            data.push({
              x: winlossData[i][2],
              low: -center,
              high: -center - value,
              value: value
            });
          }
        }
    
        var series = chart.rangeBar(data);
        series.name(name);
      };

      // create series
      createSeries(0, "Losses");
      createSeries(1, "Wins");

      // set the chart title
     chart
        .title()
        .enabled(true)
        .text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");

      // enable the chart legend
      chart
        .legend()
        .enabled(true);
  
      // create a stacked bar chart from the multi-series bar chart
      chart.yScale().stackMode("value");

      // set a container id for the chart
      chart.container("container");
  
      // initiate chart drawing
      chart.draw();

    });

    </script>
  </body>
</html>

Cách tùy chỉnh Biểu đồ thanh phân kỳ JavaScript của chúng tôi

Một điều thú vị về trực quan hóa dữ liệu tương tác với JavaScript là chúng tôi có quyền tự do tùy chỉnh nó để dữ liệu của chúng tôi kể những câu chuyện hay hơn. Tôi sẽ chỉ cho bạn cách thực hiện một số thay đổi nhanh đối với biểu đồ thanh phân kỳ dựa trên JS cơ bản để làm cho nó hấp dẫn và nhiều thông tin hơn.

Bây giờ tôi sẽ ném 3 con trỏ và tùy chỉnh biểu đồ để cải thiện một số chức năng và tính thẩm mỹ của nó.

1. Cài đặt trục và tạo kiểu cơ bản

Để bắt đầu, hãy thay đổi một số kiểu và cài đặt cơ bản cho trục X và Y để làm cho mọi thứ dễ đọc hơn.

Chỉ cần nhớ rằng trong AnyChart, biểu đồ thanh phạm vi là phiên bản dọc của biểu đồ cột phạm vi. Do đó, trong biểu đồ thanh phân kỳ của chúng tôi, trục hoành là trục Y và trục tung được gọi là trục X.

Vì vậy, hãy loại bỏ các dấu kiểm, định cấu hình tiêu đề trục và tùy chỉnh các nhãn trên trục tung. Chúng tôi cũng sẽ đặt 80 là giá trị lớn nhất và xóa dấu trừ khỏi các nhãn trên trục hoành:

chart
  .xAxis()
  .ticks(false);
chart
  .xAxis()
  .title()
  .enabled(true)
  .text("Years")
  .padding([0, 0, 10, 0]);
chart
  .xAxis()
  .labels()
  .fontSize(11)
  .fontColor("#474747")
  .padding([0, 10, 0, 0]);
chart.yScale().maximum(80);
chart
  .yAxis(0)
  .labels()
  .format(function () {
    return Math.abs(this.value);
  });

Tiếp theo, để nhấn mạnh sự phân kỳ, sẽ rất tuyệt nếu thêm một nét trắng giữa hai chuỗi và một vạch đánh dấu ở 0.

// add the stroke by setting it in this line
series.name(name).stroke("3 #fff 1");

...

// create a line marker at 0
chart
  .lineMarker()
  .value(0)
  .stroke("#CECECE");
trung gian-chart-1-1

Ah, không phải bây giờ biểu đồ trông bóng bẩy và dễ đọc hơn sao?

Kiểm tra mã cho phiên bản biểu đồ thanh phân kỳ này trên CodePen.

Trước khi chúng tôi thực hiện nhiều tùy chỉnh hơn, có một sự lạc đề nhỏ mà tôi muốn thực hiện. Tôi cũng đã nghĩ đến việc làm cho trục ngang hiển thị các trận thắng và thua trong mỗi mùa theo tỷ lệ phần trăm thay vì giá trị tuyệt đối. Nó khá dễ dàng nhưng kết quả không cung cấp thêm thông tin chi tiết nào.

Ngoài ra, các giá trị tuyệt đối đại diện cho thời điểm Lakers chơi nhiều hay ít trận hơn trong năm. Cuối cùng đó là lý do tại sao tôi quyết định giữ các giá trị tuyệt đối. Nhưng bạn có thể kiểm tra phiên bản có tỷ lệ phần trăm trên CodePen.

Chà, hãy tiếp tục từ cú đánh hụt đó và quay lại chế độ lấy nét.

2. Tùy chỉnh chú giải công cụ

Tiếp theo, tôi đã tùy chỉnh chú giải công cụ để làm cho nó có nhiều thông tin và thú vị hơn.

Ở đây, tôi cũng có ý tưởng hiển thị các giá trị phần trăm được tính toán trước đó (xem ví dụ từ phần lạc đề ngay phía trên) dưới dạng một thông tin bổ sung trong chú giải công cụ của biểu đồ thanh phân kỳ của chúng tôi.

Vì vậy, bước đầu tiên là thực hiện phép tính giá trị phần trăm:

// calculate percentages for the tooltip
var val = winlossData[i][columnNumber] * 100;
if (columnNumber == 0) {
  var percentValue =
    val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);
} else {
  var percentValue =
    val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);
}
percentValue = percentValue.toFixed(2);

Phép tính tỷ lệ phần trăm diễn ra như một phần của chức năng cấu hình chuỗi — hãy xem cách nó được đưa vào đó:

// configure a function to create series
var createSeries = function (columnNumber, name) {
  var data = [];
  for (var i = 0; i < winlossData.length; i++) {

    // calculate percentages for the tooltip
    var val = winlossData[i][columnNumber] * 100;
    if (columnNumber == 0) {
      var percentValue =
        val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);
    } else {
      var percentValue =
        val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);
    }
    percentValue = percentValue.toFixed(2);     
      
    var value = winlossData[i][columnNumber];
    var center = 0;
    if (name === "Wins") {
      data.push({
        x: winlossData[i][2],
        low: center,
        high: center + value,
        value: value,
        // add the calculated percentage value
        percentValue: percentValue
      });
    } else {
      data.push({
        x: winlossData[i][2],
        low: -center,
        high: -center - value,
        value: value,
        // add the calculated percentage value
        percentValue: percentValue
      });
    }
  }

Sau đó, chúng tôi có định dạng chú giải công cụ bổ sung để làm cho tất cả trông gọn gàng và đẹp mắt:

// customize the tooltip
chart
  .tooltip()
  .useHtml(true)
  .fontSize(12)
  .titleFormat(function () {
    return this.getData("x") + " " + this.seriesName;
  })
  .format(function () {
    return (
      "<h6 style="font-size:12px; font-weight:400; margin: 0.25rem 0;">Total games: " +
      "<b>" +
      this.getData("value") +
      "</b></h6>" +
      "<h6 style="font-size:12px; font-weight:400; margin: 0.25rem 0;">Percentage games: " +
      "<b>" +
      this.getData("percentValue") +
      " %</b></h6>"
    );
  });

3. Thay đổi bảng màu

Chà, tùy chỉnh cuối cùng này chắc chắn là một con dao găm — cú đánh sẽ làm cho biểu đồ trông hoàn toàn tuyệt vời và giành chiến thắng trong trò chơi! Nó chỉ đơn giản là thay đổi bảng màu để phù hợp với màu áo thi đấu của LA Lakers. Quá dễ:

chart.palette(
  anychart.palettes.distinctColors().items(["#FDB827", "#542583"])
);
biểu đồ cuối cùng không có chú giải công cụ-2

Bạn thấy đấy, vào giây cuối cùng, tôi cũng đã tắt chế độ lựa chọn bằng cách thêm lệnh tương ứng vào dòng này:

series.name(name).stroke("3 #fff 1").selectionMode("none");

Được chứ! Biểu đồ thanh phạm vi phân kỳ JavaScript tương tác cuối cùng này có sẵn trên CodePen.

Đọc thêm  Cách sử dụng map(), filter() và reduce() trong JavaScript

Để đề phòng, mã đầy đủ cho trang HTML có ngay tại đây:

<html>
  <head>
    <title>JavaScript Diverging Bar Chart</title>
    <script src="https://cdn.anychart.com/releases/8.9.0/js/anychart-base.min.js" type="text/javascript"></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 () {
  
      // create a bar chart
      var chart = anychart.bar();

      // data
      var winlossData = [
        [65, 17, "2015-16"],
        [61, 21, "2014-15"],
        [55, 27, "2013-14"],
        [37, 45, "2012-13"],
        [25, 41, "2011-12"],
        [25, 57, "2010-11"],
        [25, 57, "2009-10"],
        [17, 65, "2008-09"],
        [25, 57, "2007-08"],
        [40, 42, "2006-07"],
        [37, 45, "2005-06"],
        [48, 34, "2004-05"],
        [26, 56, "2003-04"],
        [32, 50, "2002-03"],
        [24, 58, "2001-02"],
        [26, 56, "2000-01"],
        [15, 67, "1999-00"],
        [19, 31, "1998-99"],
        [21, 61, "1997-98"],
        [26, 56, "1996-97"]
      ];

      // configure a function to create series
      var createSeries = function (columnNumber, name) {
        var data = [];
        for (var i = 0; i < winlossData.length; i++) {

          // calculate percentages for the tooltip
          var val = winlossData[i][columnNumber] * 100;
          if (columnNumber == 0) {
            var percentValue =
              val / (winlossData[i][columnNumber] + winlossData[i][columnNumber + 1]);
         } else {
            var percentValue =
              val / (winlossData[i][columnNumber] + winlossData[i][columnNumber - 1]);
          }
          percentValue = percentValue.toFixed(2);     
      
          var value = winlossData[i][columnNumber];
          var center = 0;
          if (name === "Wins") {
            data.push({
              x: winlossData[i][2],
              low: center,
              high: center + value,
              value: value,
              // add the calculated percentage value
              percentValue: percentValue
            });
          } else {
            data.push({
              x: winlossData[i][2],
              low: -center,
              high: -center - value,
              value: value,
              // add the calculated percentage value
              percentValue: percentValue
            });
          }
        }
    
        var series = chart.rangeBar(data);
        series.name(name).stroke("3 #fff 1").selectionMode("none");
      };

      // create series
      createSeries(0, "Losses");
      createSeries(1, "Wins");

      // set the chart title
      chart
        .title()
        .enabled(true)
        .text("20 Years of LA Lakers Win-Loss Record with Kobe Bryant (1996-2016)");

      // enable the chart legend
      chart
        .legend()
        .enabled(true);
  
      // create a stacked bar chart from the multi-series bar chart
      chart.yScale().stackMode("value");
  
      // customize the settings of the axes
      chart
        .xAxis()
        .ticks(false);
      chart
        .xAxis()
        .title()
        .enabled(true)
        .text("Years")
        .padding([0, 0, 10, 0]);
      chart
        .xAxis()
        .labels()
        .fontSize(11)
        .fontColor("#474747")
        .padding([0, 10, 0, 0]);
      chart.yScale().maximum(80);
      chart
        .yAxis(0)
        .labels()
        .format(function () {
          return Math.abs(this.value);
        });

      // create a line marker at 0
      chart
        .lineMarker()
        .value(0)
        .stroke("#CECECE");
  
      // customize the tooltip
      chart
        .tooltip()
        .useHtml(true)
        .fontSize(12)
        .titleFormat(function () {
          return this.getData("x") + " " + this.seriesName;
        })
        .format(function () {
          return (
            "<h6 style="font-size:12px; font-weight:400; margin: 0.25rem 0;">Total games: " +
            "<b>" +
            this.getData("value") +
            "</b></h6>" +
            "<h6 style="font-size:12px; font-weight:400; margin: 0.25rem 0;">Percentage games: " +
            "<b>" +
            this.getData("percentValue") +
            " %</b></h6>"
          );
        });
  
      // set a custom color palette
      chart.palette(
        anychart.palettes.distinctColors().items(["#FDB827", "#542583"])
      );

      // set a container id for the chart
      chart.container("container");
  
      // initiate chart drawing
      chart.draw();

    });

    </script>
  </body>
</html>

Phần kết luận

Trong hướng dẫn này, tôi đã chỉ cho bạn cách nhanh chóng và dễ dàng để thiết lập và chạy biểu đồ thanh phân kỳ bằng JavaScript. Chúng tôi cũng đã thấy một chút nỗ lực làm cho đồ họa trông thực sự bắt mắt như thế nào và cho phép bạn khai thác nhiều hơn dữ liệu cơ bản. Hãy cho tôi biết nếu bạn có bất cứ thắc mắc nào.

Nếu bạn cảm thấy có động lực để làm việc nhiều hơn với trực quan hóa dữ liệu dựa trên JS tương tác, hãy tiếp tục và chơi với các biểu đồ thanh phân kỳ trên CodePen (tôi đã thêm liên kết trong suốt hướng dẫn), xem các tùy chọn biểu đồ khác hoặc thử các thư viện JavaScript khác.

Ngoài ra, khi chúng ta xem lại số liệu thống kê về đội bóng của huyền thoại bóng rổ ở đây, hãy nhớ chơi thể thao nhiều hơn và tạo ra nhiều hình ảnh hơn!



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