Trực quan hoá: Biểu đồ hình tròn

Tổng quan

Một biểu đồ hình tròn được hiển thị trong trình duyệt bằng cách sử dụng SVG hoặc VML. Hiển thị chú giải công cụ khi di chuột qua lát.

Ví dụ:

 
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities'
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Tạo biểu đồ 3D Pie

Nếu bạn đặt tùy chọn is3D thành true, biểu đồ hình tròn của bạn sẽ được vẽ như thể có ba phương diện:

Theo mặc định, is3D là false, vì vậy, chúng ta sẽ đặt rõ ràng giá trị này thành true: 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          is3D: true,
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart_3d" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Tạo biểu đồ vòng

Biểu đồ bánh vòng là biểu đồ hình tròn có một lỗ ở giữa. Bạn có thể tạo biểu đồ vòng với tùy chọn pieHole:

Bạn nên đặt tùy chọn pieHole thành một số từ 0 đến 1, tương ứng với tỷ lệ bán kính giữa lỗ và biểu đồ. Các con số từ 0,4 đến 0,6 sẽ trông đẹp nhất trên hầu hết các biểu đồ. Các giá trị bằng hoặc lớn hơn 1 sẽ bị bỏ qua và giá trị 0 sẽ đóng hoàn toàn lỗ của bạn.

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Task', 'Hours per Day'],
          ['Work',     11],
          ['Eat',      2],
          ['Commute',  2],
          ['Watch TV', 2],
          ['Sleep',    7]
        ]);

        var options = {
          title: 'My Daily Activities',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donutchart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Bạn không thể kết hợp các tùy chọn pieHole và is3D; nếu bạn làm như vậy, pieHole sẽ bị bỏ qua.

Lưu ý rằng Google Biểu đồ cố gắng đặt nhãn càng gần trung tâm của lát cắt càng tốt. Nếu bạn có biểu đồ hình bánh rán chỉ với một lát, thì phần giữa của hình cắt có thể rơi vào lỗ hình bánh rán. Trong trường hợp đó, hãy thay đổi màu của nhãn:
Tùy chọn
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
HTML đầy đủ
<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {'packages':['corechart']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

        var data = google.visualization.arrayToDataTable([
          ['Effort', 'Amount given'],
          ['My all',     100],
        ]);

        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };

        var chart = new google.visualization.PieChart(document.getElementById('donut_single'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="donut_single" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Xoay biểu đồ hình tròn

Theo mặc định, biểu đồ hình tròn bắt đầu với cạnh trái của lát đầu tiên trỏ thẳng lên. Bạn có thể thay đổi điều đó bằng tuỳ chọn pieStartAngle:

Ở đây, chúng tôi xoay biểu đồ theo chiều kim đồng hồ 100 độ với tùy chọn pieStartAngle: 100. (Được chọn vì góc cụ thể đó giúp làm cho nhãn "Ý" vừa với phần cắt.)

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['German',  5.85],
          ['French',  1.66],
          ['Italian', 0.316],
          ['Romansh', 0.0791]
        ]);

      var options = {
        legend: 'none',
        pieSliceText: 'label',
        title: 'Swiss Language Use (100 degree rotation)',
        pieStartAngle: 100,
      };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Bùng nổ mảnh

Bạn có thể tách các lát bánh khỏi phần còn lại của biểu đồ bằng thuộc tính offset của tuỳ chọn slices:

Để phân tách một lát cắt, hãy tạo một đối tượng slices và chỉ định số của lát cắt thích hợp offset trong khoảng từ 0 đến 1. Dưới đây, chúng tôi gán các độ lệch lớn hơn dần cho các lát cắt 4 (Gujarati), 12 (Marathi), 14 (Oriya) và 15 (Punjabi): 

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Language', 'Speakers (in millions)'],
          ['Assamese', 13], ['Bengali', 83], ['Bodo', 1.4],
          ['Dogri', 2.3], ['Gujarati', 46], ['Hindi', 300],
          ['Kannada', 38], ['Kashmiri', 5.5], ['Konkani', 5],
          ['Maithili', 20], ['Malayalam', 33], ['Manipuri', 1.5],
          ['Marathi', 72], ['Nepali', 2.9], ['Oriya', 33],
          ['Punjabi', 29], ['Sanskrit', 0.01], ['Santhali', 6.5],
          ['Sindhi', 2.5], ['Tamil', 61], ['Telugu', 74], ['Urdu', 52]
        ]);

        var options = {
          title: 'Indian Language Use',
          legend: 'none',
          pieSliceText: 'label',
          slices: {  4: {offset: 0.2},
                    12: {offset: 0.3},
                    14: {offset: 0.4},
                    15: {offset: 0.5},
          },
        };

        var chart = new google.visualization.PieChart(document.getElementById('piechart'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="piechart" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Xoá lát cắt

Để bỏ qua một lát, hãy thay đổi màu thành 'transparent':

Chúng tôi cũng sử dụng pieStartAngle để xoay biểu đồ 135 độ, pieSliceText để xoá văn bản khỏi lát cắt và tooltip.trigger để tắt chú giải công cụ:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Pac Man', 'Percentage'],
          ['', 75],
          ['', 25]
        ]);

        var options = {
          legend: 'none',
          pieSliceText: 'none',
          pieStartAngle: 135,
          tooltip: { trigger: 'none' },
          slices: {
            0: { color: 'yellow' },
            1: { color: 'transparent' }
          }
        };

        var chart = new google.visualization.PieChart(document.getElementById('pacman'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="pacman" style="width: 900px; height: 500px;"></div>
  </body>
</html>

Ngưỡng hiển thị lát cắt

Bạn có thể đặt một giá trị làm ngưỡng để hiển thị một lát bánh. Giá trị này tương ứng với một phần biểu đồ (toàn bộ biểu đồ có giá trị 1). Để đặt ngưỡng này dưới dạng phần trăm toàn bộ, hãy chia tỷ lệ phần trăm mong muốn cho 100 (đối với ngưỡng 20%, giá trị sẽ là 0,2). 

sliceVisibilityThreshold: 5/8 // This is equivalent to 0.625 or 62.5% of the chart.

Những phần cắt nhỏ hơn ngưỡng này sẽ được kết hợp thành một phần "Khác" và sẽ có giá trị kết hợp của tất cả các phần dưới ngưỡng. 

    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('string', 'Pizza');
      data.addColumn('number', 'Populartiy');
      data.addRows([
        ['Pepperoni', 33],
        ['Hawaiian', 26],
        ['Mushroom', 22],
        ['Sausage', 10], // Below limit.
        ['Anchovies', 9] // Below limit.
      ]);

      var options = {
        title: 'Popularity of Types of Pizza',
        sliceVisibilityThreshold: .2
      };

      var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
      chart.draw(data, options);
    }

Đang tải

Tên gói google.charts.load là "corechart".

  google.charts.load("current", {packages: ["corechart"]});

Tên lớp của hình ảnh trực quan là google.visualization.PieChart. 

  var visualization = new google.visualization.PieChart(container);

Định dạng dữ liệu

Hàng: Mỗi hàng trong bảng biểu thị một phần.

Cột:

  Cột 0 Cột 1 ... Cột N (không bắt buộc)
Mục đích: Nhãn lát cắt Giá trị lát cắt ... Vai trò không bắt buộc
Loại dữ liệu: chuỗi number ...
Vai trò: miền data ...
Các vai trò cột không bắt buộc: None (Không có) None (Không có) ...

Các lựa chọn về cấu hình

Tên
màu nền

Màu nền của vùng chính trên biểu đồ. Có thể là một chuỗi màu HTML đơn giản, ví dụ: 'red' hoặc '#00cc00', hoặc một đối tượng có các thuộc tính sau.

Loại: chuỗi hoặc đối tượng
Mặc định: "trắng"
backgroundColor.stroke

Màu của đường viền biểu đồ, dưới dạng chuỗi màu HTML.

Loại: chuỗi
Mặc định: "#666"
backgroundColor.strokeWidth

Chiều rộng đường viền, tính bằng pixel.

Loại: số
Mặc định: 0
backgroundColor.fill

Biểu đồ tô màu dưới dạng chuỗi màu HTML.

Loại: chuỗi
Mặc định: "trắng"
Khu vực

Một đối tượng có thành viên để định cấu hình vị trí và kích thước của khu vực biểu đồ (chính là biểu đồ sẽ được vẽ, ngoại trừ trục và chú giải). Có hai định dạng được hỗ trợ: số hoặc số theo sau là %. Số đơn giản là giá trị tính bằng pixel; số theo sau là % là phần trăm. Ví dụ: chartArea:{left:20,top:0,width:'50%',height:'75%'}

Loại: đối tượng
Mặc định: rỗng
ChartArea.backgroundColor
Màu nền của khu vực biểu đồ. Khi sử dụng chuỗi, chuỗi đó có thể là một chuỗi hex (ví dụ: "#fdc") hoặc tên màu tiếng Anh. Khi sử dụng đối tượng, bạn có thể cung cấp các thuộc tính sau:
  • stroke: màu sắc, được cung cấp dưới dạng chuỗi hex hoặc tên màu tiếng Anh.
  • strokeWidth: nếu được cung cấp, hãy vẽ đường viền xung quanh khu vực biểu đồ có chiều rộng nhất định (và có màu của stroke).
Loại: chuỗi hoặc đối tượng
Mặc định: "trắng"
ChartArea.left

Khoảng cách để vẽ biểu đồ từ đường viền trái.

Loại: số hoặc chuỗi
Mặc định: tự động
ChartArea.top

Khoảng cách để vẽ biểu đồ từ đường viền trên.

Loại: số hoặc chuỗi
Mặc định: tự động
vấn đề

Chiều rộng khu vực trên biểu đồ.

Loại: số hoặc chuỗi
Mặc định: tự động
vấn đề

Chiều cao khu vực trên biểu đồ.

Loại: số hoặc chuỗi
Mặc định: tự động
màu

Màu sắc sử dụng cho các phần tử biểu đồ. Một mảng chuỗi, trong đó mỗi phần tử là một chuỗi màu HTML, ví dụ: colors:['red','#004411'].

Loại: Mảng chuỗi
Mặc định: màu mặc định
bật sự tương tác

Biểu đồ có gửi sự kiện dựa trên người dùng hay phản ứng với tương tác của người dùng không. Nếu giá trị là sai, biểu đồ sẽ không gửi "sự kiện" hoặc các sự kiện dựa trên lượt tương tác khác (nhưng sẽ gửi sự kiện sẵn sàng hoặc sự kiện lỗi) và sẽ không hiển thị văn bản di chuột hay thay đổi tuỳ thuộc vào hoạt động đầu vào của người dùng.

Loại: Boolean
Mặc định: true
Kích thước phông chữ

Kích thước phông chữ mặc định, tính bằng pixel, của tất cả văn bản trong biểu đồ. Bạn có thể ghi đè giá trị này bằng cách sử dụng các thuộc tính cho các phần tử biểu đồ cụ thể.

Loại: số
Mặc định: tự động
phông chữ

Phông chữ mặc định cho tất cả văn bản trong biểu đồ. Bạn có thể ghi đè giá trị này bằng cách sử dụng các thuộc tính cho các phần tử biểu đồ cụ thể.

Loại: chuỗi
Mặc định: 'Arial'
forceIFrame

Vẽ biểu đồ bên trong một khung cùng dòng. (Xin lưu ý rằng trên IE8, tuỳ chọn này sẽ bị bỏ qua; tất cả biểu đồ IE8 đều được vẽ trong khung i.)

Loại: Boolean
Mặc định: sai
độ cao

Chiều cao của biểu đồ, tính bằng pixel.

Loại: số
Mặc định: chiều cao của phần tử chứa
3D

Nếu đúng, sẽ hiển thị một biểu đồ ba chiều.

Loại: Boolean
Mặc định: sai
chú giải

Một đối tượng có các thành viên để định cấu hình các khía cạnh khác nhau của chú giải. Để chỉ định thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
Loại: đối tượng
Mặc định: rỗng
align.alignment

Căn chỉnh chú giải. Có thể là một trong những trạng thái sau:

  • "start" - Căn chỉnh theo điểm bắt đầu của khu vực được phân bổ cho chú giải.
  • "center" - Tập trung vào khu vực được phân bổ cho chú giải.
  • "end" - Căn chỉnh vào cuối khu vực được phân bổ cho chú giải.

Bắt đầu, căn giữa và kết thúc tương ứng với kiểu -- dọc hoặc ngang -- của chú giải. Ví dụ: trong chú giải "right" (phải), "start" (bắt đầu) và "end" (kết thúc) lần lượt ở trên cùng và dưới cùng; đối với chú giải "top" (trên cùng), "start" (bắt đầu) và "end" (cuối cùng) sẽ lần lượt ở bên trái và bên phải khu vực.

Giá trị mặc định này tùy thuộc vào vị trí của chú giải. Đối với chú giải "bottom" (dưới), giá trị mặc định là "center" (trung tâm); các chú giải khác mặc định là "start".

Loại: chuỗi
Mặc định: tự động
Thêm chú thích.

Vị trí chú giải. Có thể là một trong những trạng thái sau:

  • 'bottom' - Hiển thị chú giải bên dưới biểu đồ.
  • "nhãn" – Vẽ các đường nối lát cắt với giá trị dữ liệu của đường cắt.
  • 'left' - Hiển thị chú giải bên trái của biểu đồ.
  • "none" – Không hiển thị chú giải.
  • 'right' - Hiển thị chú giải bên phải biểu đồ.
  • 'top' - Hiển thị chú giải phía trên biểu đồ.
Loại: chuỗi
Mặc định: "phải"
Legends.maxLines

Số dòng tối đa trong phần chú giải. Đặt thành một số lớn hơn một để thêm dòng vào chú giải của bạn. Lưu ý: Logic chính xác dùng để xác định số dòng thực tế được kết xuất vẫn là thông lượng.

Tùy chọn này hiện chỉ hoạt động khi Legends.position là 'hàng đầu'.

Loại: số
Mặc định: 1
Style.textStyle

Đối tượng chỉ định kiểu văn bản của chú giải. Đối tượng có định dạng sau:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color có thể là chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
hình tròn

Nếu nằm trong khoảng từ 0 đến 1, hãy hiển thị biểu đồ vòng. Hố có bán kính bằng number lần bán kính của biểu đồ.

Loại: số
Mặc định: 0
pieSliceBorderColor

Màu của đường viền. Chỉ áp dụng khi biểu đồ hai chiều.

Loại: chuỗi
Mặc định: "trắng"
Văn bản hình tròn

Nội dung của văn bản được hiển thị trên lát cắt. Có thể là một trong những trạng thái sau:

  • 'percentage' - Phần trăm kích thước lát cắt trong tổng số.
  • 'value' - Giá trị định lượng của lát cắt.
  • 'label' - Tên của lát cắt.
  • "None" – Không có văn bản nào được hiển thị.
Loại: chuỗi
Mặc định: 'percentage'
Phong cách văn bản hình tròn

Một đối tượng chỉ định kiểu văn bản Slice. Đối tượng có định dạng sau:

{color: <string>, fontName: <string>, fontSize: <number>}

color có thể là chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
Hình tròn bắt đầu

Góc, tính bằng độ, để xoay biểu đồ theo. Giá trị mặc định của 0 sẽ định hướng cạnh ngoài cùng bên trái của lát đầu tiên lên trực tiếp.

Loại: số
Mặc định: 0
đảo loại

Nếu đúng, hãy vẽ các lát cắt ngược chiều kim đồng hồ. Tùy chọn mặc định là vẽ theo chiều kim đồng hồ.

Loại: Boolean
Mặc định: sai
pieResidueSliceColor

Màu của lát kết hợp chứa tất cả các lát cắt bên dưới sliceVisibilityThreshold.

Loại: chuỗi
Mặc định: "#DAU"
Nhãn ghi của bánh

Nhãn cho lát kết hợp chứa tất cả các lát cắt bên dưới sliceVisibilityThreshold.

Loại: chuỗi
Mặc định: "Khác"
lát

Một mảng các đối tượng, mỗi đối tượng mô tả định dạng của lát tương ứng trong biểu đồ hình tròn. Để dùng các giá trị mặc định cho một lát cắt, hãy chỉ định một đối tượng trống (tức là {}). Nếu bạn không chỉ định lát cắt hoặc giá trị nào đó, thì hệ thống sẽ sử dụng giá trị chung. Mỗi đối tượng hỗ trợ những thuộc tính sau:

  • color – Màu sắc sử dụng cho lát này. Chỉ định một chuỗi màu HTML hợp lệ.
  • offset – Khoảng cách từ phần bánh đến phần còn lại của bánh, tính từ 0,0 (không hề bán) đến 1,0 (bán kính bánh).
  • textStyle – Ghi đè pieSliceTextStyle toàn cục cho lát cắt này.

Bạn có thể chỉ định một mảng đối tượng, mỗi mảng áp dụng cho lát cắt theo thứ tự đã cho, hoặc bạn có thể chỉ định một đối tượng trong đó mỗi phần tử con có một khoá số cho biết phần tử đó. Ví dụ: hai khai báo sau giống hệt nhau và khai báo phần đầu tiên là màu đen và phần thứ tư là màu đỏ: 

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
Loại: Một mảng các đối tượng hoặc đối tượng có các đối tượng lồng nhau
Mặc định: {}
S!!VisibilityVisibility

Giá trị phân số của chiếc bánh, dưới đó mà lát cắt sẽ không hiển thị riêng lẻ. Tất cả các phần chưa vượt qua ngưỡng này sẽ được kết hợp với một phần "Khác", sẽ có kích thước là tổng của tất cả các kích thước của mình. Mặc định là không hiển thị từng phần nhỏ hơn nửa độ. 

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
Loại: số
Mặc định: Nửa độ (.5/360 hoặc 1/720 hoặc .0014)
tiêu đề

Văn bản sẽ hiển thị phía trên biểu đồ.

Loại: chuỗi
Mặc định: không có tiêu đề
Kiểu văn bản tiêu đề

Đối tượng chỉ định kiểu văn bản tiêu đề. Đối tượng có định dạng sau:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color có thể là chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
chú giải công cụ

Một đối tượng có thành viên để định cấu hình các thành phần trong chú giải công cụ. Để chỉ định các thuộc tính của đối tượng này, bạn có thể sử dụng ký hiệu cố định đối tượng, như minh hoạ dưới đây: 

{textStyle: {color: '#FF0000'}, showColorCode: true}
Loại: đối tượng
Mặc định: rỗng
chú giải công cụ.ignoreBounds

Nếu được đặt thành true, cho phép vẽ cửa sổ chú giải công cụ nằm ngoài giới hạn của biểu đồ ở tất cả các bên.

Lưu ý: Điều này chỉ áp dụng cho chú giải công cụ HTML. Nếu bạn bật tính năng này bằng chú giải công cụ SVG, thì mọi mục tràn ra ngoài giới hạn biểu đồ sẽ bị cắt. Hãy xem phần Tuỳ chỉnh nội dung cho chú giải công cụ để biết thêm thông tin.

Loại: Boolean
Mặc định: sai
chú giải công cụ.isHtml

Nếu bạn đặt chính sách này thành true, hãy sử dụng chú giải công cụ (hiển thị) HTML (thay vì hiển thị SVG). Hãy xem phần Tuỳ chỉnh nội dung cho chú giải công cụ để biết thêm thông tin.

Lưu ý: tuỳ chỉnh nội dung chú giải công cụ HTML thông qua vai trò dữ liệu cột chú giải công cụ không được hỗ trợ bởi hình ảnh Biểu đồ bong bóng.

Loại: Boolean
Mặc định: sai
chú giải công cụ.showColorCode

Nếu đúng, hãy hiển thị các hình vuông có màu sắc bên cạnh thông tin lát cắt trong chú giải công cụ.

Loại: Boolean
Mặc định: sai
chú giải công cụ.text

Những thông tin sẽ hiển thị khi người dùng di chuột qua lát bánh. Có thể có những giá trị sau:

  • "cả hai" – [Mặc định] Hiển thị cả giá trị tuyệt đối của lát cắt và tỷ lệ phần trăm của toàn bộ.
  • 'value' - Chỉ hiển thị giá trị tuyệt đối của lát cắt.
  • 'percentage' - Chỉ hiển thị phần trăm của toàn bộ được biểu thị bằng lát cắt.
Loại: chuỗi
Mặc định: "cả hai"
Chú giải công cụ.textStyle

Đối tượng chỉ định kiểu văn bản của chú giải công cụ. Đối tượng có định dạng sau:

{ color: <string>,
  fontName: <string>,
  fontSize: <number>,
  bold: <boolean>,
  italic: <boolean> }

color có thể là chuỗi màu HTML bất kỳ, ví dụ: 'red' hoặc '#00cc00'. Ngoài ra, hãy xem fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
chú giải công cụ trong trình kích hoạt

Tương tác của người dùng khiến chú giải công cụ được hiển thị:

  • "tiêu điểm" – Chú giải công cụ sẽ hiển thị khi người dùng di chuột qua phần tử.
  • 'none' - Chú giải công cụ sẽ không hiển thị.
  • 'selection' – Chú giải công cụ sẽ hiển thị khi người dùng chọn phần tử.
Loại: chuỗi
Mặc định: "tiêu điểm"
chiều rộng

Chiều rộng của biểu đồ, tính bằng pixel.

Loại: số
Mặc định: chiều rộng của phần tử chứa

Phương thức

Phương thức
draw(data, options)

Vẽ biểu đồ. Biểu đồ chỉ chấp nhận các lệnh gọi phương thức khác sau khi sự kiện ready được kích hoạt. Extended description

Loại dữ liệu trả về: không có
getAction(actionID)

Trả về đối tượng hành động trên chú giải công cụ có actionID được yêu cầu.

Loại dữ liệu trả về: đối tượng
getBoundingBox(id)

Trả về một đối tượng chứa thành phần bên trái, trên cùng, chiều rộng và chiều cao của phần tử biểu đồ id. Định dạng cho id chưa được ghi lại (đây là giá trị trả về của trình xử lý sự kiện) nhưng dưới đây là một số ví dụ:

var cli = chart.getChartLayoutInterface();

Chiều cao vùng biểu đồ
cli.getBoundingBox('chartarea').height
Chiều rộng của thanh thứ ba trong chuỗi biểu đồ thanh hoặc cột đầu tiên
cli.getBoundingBox('bar#0#2').width
Hộp giới hạn của nêm thứ năm của biểu đồ hình tròn
cli.getBoundingBox('slice#4')
Hộp ranh giới dữ liệu biểu đồ của biểu đồ dọc (ví dụ: cột):
cli.getBoundingBox('vAxis#0#gridline')
Hộp giới hạn dữ liệu biểu đồ của biểu đồ ngang (ví dụ: thanh):
cli.getBoundingBox('hAxis#0#gridline')

Giá trị tương ứng với vùng chứa của biểu đồ. Gọi hàm này sau khi biểu đồ được vẽ.

Loại dữ liệu trả về: đối tượng
getChartAreaBoundingBox()

Trả về một đối tượng chứa nội dung bên trái, trên cùng, chiều rộng và chiều cao của nội dung biểu đồ (tức là không bao gồm nhãn và chú giải):

var cli = chart.getChartLayoutInterface();

cli.getChartAreaBoundingBox().left
cli.getChartAreaBoundingBox().top
cli.getChartAreaBoundingBox().height
cli.getChartAreaBoundingBox().width

Giá trị tương ứng với vùng chứa của biểu đồ. Gọi hàm này sau khi biểu đồ được vẽ.

Loại dữ liệu trả về: đối tượng
getChartLayoutInterface()

Trả về một đối tượng chứa thông tin về vị trí trên màn hình của biểu đồ và các phần tử của biểu đồ.

Bạn có thể gọi các phương thức sau trên đối tượng được trả về:

  • getBoundingBox
  • getChartAreaBoundingBox
  • getHAxisValue
  • getVAxisValue
  • getXLocation
  • getYLocation

Gọi hàm này sau khi biểu đồ được vẽ.

Loại dữ liệu trả về: đối tượng
getHAxisValue(xPosition, optional_axis_index)

Trả về giá trị dữ liệu theo chiều ngang tại xPosition, là một giá trị bù trừ pixel từ cạnh bên của vùng chứa biểu đồ. Có thể âm.

Ví dụ: chart.getChartLayoutInterface().getHAxisValue(400)

Gọi hàm này sau khi biểu đồ được vẽ.

Loại trả về: số
getImageURI()

Trả về biểu đồ được chuyển đổi tuần tự dưới dạng một URI hình ảnh.

Gọi hàm này sau khi biểu đồ được vẽ.

Xem phần In biểu đồ PNG.

Loại trả về: chuỗi
getSelection()

Trả về một mảng các thực thể biểu đồ đã chọn. Các thực thể có thể chọn là các lát cắt và mục nhập chú giải. Đối với biểu đồ này, chỉ có thể chọn một thực thể vào bất kỳ thời điểm nào. Extended description .

Loại dữ liệu trả về: Một mảng các phần tử lựa chọn
getVAxisValue(yPosition, optional_axis_index)

Trả về giá trị dữ liệu dọc tại yPosition, giá trị này bù trừ pixel từ cạnh trên cùng của vùng chứa biểu đồ. Có thể âm.

Ví dụ: chart.getChartLayoutInterface().getVAxisValue(300)

Gọi hàm này sau khi biểu đồ được vẽ.

Loại trả về: số
getXLocation(dataValue, optional_axis_index)

Trả về toạ độ x của pixel theo dataValue so với cạnh trái của vùng chứa của biểu đồ.

Ví dụ: chart.getChartLayoutInterface().getXLocation(400)

Gọi hàm này sau khi biểu đồ được vẽ.

Loại trả về: số
getYLocation(dataValue, optional_axis_index)

Trả về toạ độ y pixel của dataValue so với cạnh trên của vùng chứa của biểu đồ.

Ví dụ: chart.getChartLayoutInterface().getYLocation(300)

Gọi hàm này sau khi biểu đồ được vẽ.

Loại trả về: số
removeAction(actionID)

Xoá thao tác chú giải công cụ với actionID được yêu cầu khỏi biểu đồ.

Loại dữ liệu trả về: none
setAction(action)

Đặt hành động trong chú giải công cụ sẽ được thực thi khi người dùng nhấp vào văn bản hành động.

Phương thức setAction lấy một đối tượng làm tham số hành động. Đối tượng này phải chỉ định 3 thuộc tính: id – mã nhận dạng cho thao tác được đặt, text – văn bản sẽ xuất hiện trong chú giải công cụ cho thao tác và action – hàm sẽ chạy khi người dùng nhấp vào văn bản thao tác.

Bạn phải thiết lập tất cả hành động trong chú giải công cụ trước khi gọi phương thức draw() của biểu đồ. Nội dung mô tả mở rộng.

Loại dữ liệu trả về: none
setSelection()

Chọn các thực thể biểu đồ đã chỉ định. Hủy mọi lựa chọn trước đó. Các thực thể có thể chọn là các lát cắt và mục nhập chú giải. Đối với biểu đồ này, mỗi lần bạn chỉ có thể chọn một thực thể. Extended description .

Loại dữ liệu trả về: không có
clearChart()

Xoá biểu đồ và giải phóng tất cả tài nguyên được phân bổ của biểu đồ.

Loại dữ liệu trả về: không có

Sự kiện

Để biết thêm thông tin về cách sử dụng những sự kiện này, hãy xem bài viết Hoạt động tương tác cơ bản, Xử lý sự kiện và Sự kiện kích hoạt.

Tên
click

Được kích hoạt khi người dùng nhấp vào bên trong biểu đồ. Có thể được dùng để xác định thời điểm người dùng nhấp vào tiêu đề, các phần tử dữ liệu, mục nhập chú giải, trục, đường lưới, hoặc nhãn.

Thuộc tính: targetID
error

Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ.

Thuộc tính: mã nhận dạng, thông báo
onmouseover

Được kích hoạt khi người dùng di chuột qua một thực thể hình ảnh. Truyền lại các chỉ mục hàng và cột của phần tử bảng dữ liệu tương ứng. Một phần hoặc mục chú giải tương quan với một hàng trong bảng dữ liệu (chỉ mục cột rỗng).

Tài sản: hàng, cột
onmouseout

Được kích hoạt khi người dùng di chuột khỏi một thực thể hình ảnh. Chuyển trở lại các chỉ mục hàng và cột của phần tử bảng dữ liệu tương ứng. Một phần hoặc mục chú giải tương quan với một hàng trong bảng dữ liệu (chỉ mục cột rỗng).

Tài sản: hàng, cột
ready

Biểu đồ đã sẵn sàng cho các lệnh gọi phương thức bên ngoài. Nếu muốn tương tác với biểu đồ và gọi các phương thức sau khi vẽ, bạn nên thiết lập trình nghe cho sự kiện này trước khi bạn gọi phương thức draw và chỉ gọi các phương thức này sau khi sự kiện được kích hoạt.

Thuộc tính: không có
select

Được kích hoạt khi người dùng nhấp vào một thực thể hình ảnh. Để tìm hiểu những mục bạn đã chọn, hãy gọi getSelection().

Thuộc tính: không có

Chính sách dữ liệu

Toàn bộ mã và dữ liệu đều được xử lý và kết xuất trong trình duyệt. Dữ liệu không được gửi đến bất kỳ máy chủ nào.