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

Tổng quan

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 chú thích khi di chuột lên các lát cắ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 đồ hình tròn 3D

Nếu bạn đặt tuỳ chọn is3D thành true, thì biểu đồ hình tròn sẽ được vẽ như thể biểu đồ có ba chiều:

Theo mặc định, is3D là false, vì vậy, ở đây chúng tôi đặt giá trị này thành true một cách rõ ràng: 

<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 bằng tùy chọn pieHole:

Bạn nên đặt tuỳ 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ỗ hổng và biểu đồ. Các số trong khoảng từ 0,4 đến 0,6 sẽ hiển thị tốt 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ỗ hổng 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 tuỳ chọn pieHole và is3D; nếu bạn kết hợp, pieHole sẽ bị bỏ qua.

Lưu ý rằng Google Biểu đồ cố gắng đặt nhãn càng gần với tâm của lát cắt càng tốt. Nếu bạn có biểu đồ vòng chỉ với một lát, phần giữa của lát đó có thể rơi vào lỗ vòng. Trong trường hợp đó, hãy thay đổi màu của nhãn:
Tuỳ 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 cắ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 ta xoay biểu đồ 100 độ theo chiều kim đồng hồ với tuỳ chọn pieStartAngle: 100. (Được chọn vì góc cụ thể đó sẽ làm cho nhãn "Ý" nằm vừa trong lát 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>

Nổ lát cắt

Bạn có thể tách riêng các lát biểu đồ hình tròn 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à gán số của lát cắt thích hợp là offset trong khoảng từ 0 đến 1. Dưới đây, chúng tôi chỉ định độ lệch tăng dần cho lát 4 (Tiếng Gujarati), 12 (Tiếng Marathi), 14 (Tiếng Oriya) và 15 (Tiếng Punjab): 

<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 cắ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 các lát cắt và tooltip.trigger để tắt chú thích:

<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 để lát biểu đồ hình tròn hiển thị riêng lẻ. Giá trị này tương ứng với một phần của biểu đồ (với toàn bộ biểu đồ có giá trị 1). Để đặt ngưỡng này dưới dạng tỷ lệ phần trăm của tổng thể, hãy chia tỷ lệ phần trăm mong muốn cho 100 (đối với ngưỡng 20%, giá trị này sẽ là 0,2). 

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

Mọi lát cắt nhỏ hơn ngưỡng này sẽ được kết hợp thành một lát "Khác" và sẽ nhận được tổng giá trị 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 đại diện cho một lát cắt.

Cột:

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

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

Tên
backgroundColor

Màu nền cho vùng chính của 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

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

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

Một đối tượng có các thành phần để định cấu hình vị trí và kích thước của vùng biểu đồ (trong đó biểu đồ được vẽ, ngoại trừ các 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à tỷ 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 vùng biểu đồ. Khi được sử dụng, chuỗi có thể là chuỗi hex (ví dụ: '#fdc') hoặc tên màu tiếng Anh. Khi một đối tượng được sử dụng, bạn có thể cung cấp các thuộc tính sau:
  • stroke: màu, được cung cấp dưới dạng chuỗi hex hoặc tên màu bằng tiếng Anh.
  • strokeWidth: nếu được cung cấp, hãy vẽ một đường viền xung quanh vùng biểu đồ có chiều rộng đã cho (và có màu 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
chartArea.width

Chiều rộng vùng biểu đồ.

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

Chiều cao của vùng biểu đồ.

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

Màu sẽ sử dụng cho các thành phần trong 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
enableInteractivity

Liệu biểu đồ có gửi các sự kiện dựa trên người dùng hay phản ứng với hoạt động tương tác của người dùng hay không. Nếu đặt là false, biểu đồ sẽ không gửi "select" (đã chọn) hoặc các sự kiện dựa trên hoạt động tương tác khác (nhưng sẽ gửi các sự kiện lỗi sẵn sàng hoặc 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
fontSize

Cỡ 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 đè thuộc tính này bằng cách sử dụng thuộc tính cho các phần tử cụ thể trong biểu đồ.

Loại: số
Mặc định: tự động
fontName

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

Loại: chuỗi
Mặc định: "vi"
forceIFrame

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

Loại: boolean
Mặc định: false
độ 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
is3D

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

Loại: boolean
Mặc định: false
chú thích

Một đối tượng có các thành phần để định cấu hình nhiều khía cạnh của chú giải. Để 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 bằng chữ của đố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
legend.alignment

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

  • "start" ("bắt đầu") – Được căn chỉnh với đầu khu vực được phân bổ cho chú giải.
  • "center" – Căn giữa trong khu vực được phân bổ cho chú giải.
  • 'end' – Được căn chỉnh với cuối vùng được phân bổ cho chú giải.

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

Giá trị mặc định tuỳ thuộc vào vị trí của chú giải. Đối với chú giải 'dưới cùng', giá trị mặc định là "trung tâm"; các chú giải khác được đặt mặc định là "bắt đầu".

Loại: chuỗi
Mặc định: tự động
legend.position

Vị trí của chú thích. Có thể là một trong những trạng thái sau đây:

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

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

Lựa chọn này hiện chỉ hoạt động khi theo dõi.

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

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

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

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

Nếu nằm trong khoảng từ 0 đến 1, biểu đồ vòng sẽ hiển thị. Lỗ 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 lát cắt. Chỉ áp dụng khi biểu đồ là hai chiều.

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

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

  • 'percentage' - Tỷ lệ phần trăm của kích thước lát cắt trong tổng số.
  • "giá trị" – 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 hiển thị.
Loại: chuỗi
Mặc định: 'percentage'
pieSliceTextStyle

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

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

color có thể là bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

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

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

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

Nếu đúng, vẽ các lát cắt ngược chiều kim đồng hồ. Mặc định là vẽ theo chiều kim đồng hồ.

Loại: boolean
Mặc định: false
pieResidueSliceColor

Màu cho lát cắ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: '#cpc'
pieResidueSliceLabel

Nhãn cho lát cắ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 cắt

Một mảng gồm các đối tượng, mỗi đối tượng mô tả định dạng của lát cắt tương ứng trong biểu đồ. Để sử 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 không chỉ định một lát cắt hoặc một giá trị thì giá trị chung sẽ được sử dụng. Mỗi đối tượng sẽ hỗ trợ các thuộc tính sau:

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

Bạn có thể chỉ định một mảng đối tượng, mỗi mảng đối tượ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 mà trong đó mỗi phần tử con có một khoá số để cho biết lát cắt đó được áp dụng cho lát cắt nào. Ví dụ: hai nội dung khai báo sau đây giống hệt nhau và khai báo lát đầu tiên có màu đen và lát thứ tư có màu đỏ: 

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

Giá trị phân số của biểu đồ, mà dưới đó, một lát cắt sẽ không xuất hiện riêng lẻ. Tất cả các lát cắt không vượt qua ngưỡng này sẽ được kết hợp thành một lát cắt "Khác" có kích thước bằng tổng tất cả kích thước của chúng. Mặc định là không hiển thị từng lát cắt nhỏ hơn một 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, 1/720 hoặc .0014)
title

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

Loại: chuỗi
Mặc định: không có tiêu đề
titleTextStyle

Đố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à bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

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

Một đối tượng có các thành viên để định cấu hình nhiều phần tử chú thích. Để 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 bằng chữ đối tượng, như minh hoạ dưới đây: 

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

Nếu bạn đặt thành true, bản vẽ chú thích sẽ hiển thị bên ngoài ranh giới của biểu đồ ở tất cả các phía.

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

Loại: boolean
Mặc định: false
tooltip.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ụ được kết xuất HTML (thay vì kết xuất SVG). Hãy xem bài viết Tuỳ chỉnh nội dung chú thích để biết thêm chi tiết.

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

Loại: boolean
Mặc định: false
tooltip.showColorCode

Nếu đúng, hiển thị các hình vuông màu bên cạnh thông tin về lát cắt trong chú thích.

Loại: boolean
Mặc định: false
tooltip.text

Thông tin sẽ hiển thị khi người dùng di chuột qua một lát bánh tròn. Các giá trị sau được hỗ trợ:

  • "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 đại diện bởi lát cắt.
Loại: chuỗi
Mặc định: 'cả hai'
tooltip.textStyle

Đối tượng chỉ định kiểu văn bản cho 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à bất kỳ chuỗi màu HTML nào, ví dụ: 'red' hoặc '#00cc00'. Xem thêm fontName và fontSize.

Loại: đối tượng
Mặc định: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
tooltip.trigger

Hoạt động tương tác của người dùng khiến chú thích xuất hiện:

  • "focus" – Chú thích 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 được hiển thị.
  • 'lựa chọn' - Chú giải công cụ sẽ được hiển thị khi người dùng chọn phần tử.
Loại: chuỗi
Mặc định: "lấy nét"
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 đồ này chỉ chấp nhận các lệnh gọi phương thức khác sau khi kích hoạt sự kiện ready. Extended description.

Loại trả lại: không có
getAction(actionID)

Trả về đối tượng hành động trong chú giải công cụ với 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 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 của id chưa được ghi nhận (chúng là các giá trị trả về của trình xử lý sự kiện), nhưng sau đây là một số ví dụ:

var cli = chart.getChartLayoutInterface();

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

Các giá trị liên quan đến vùng chứa của biểu đồ. Gọi lệnh 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 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

Các giá trị liên quan đến vùng chứa của biểu đồ. Gọi lệnh 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 lệnh 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. Giá trị này là một giá trị bù trừ pixel tính từ cạnh trái của vùng chứa biểu đồ. Có thể là giá trị âm.

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

Gọi lệnh 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 URI hình ảnh.

Gọi lệnh này sau khi biểu đồ được vẽ.

Xem In biểu đồ PNG.

Loại dữ liệu trả về: chuỗi
getSelection()

Trả về một mảng gồm 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, bạn chỉ có thể chọn một thực thể tại một thời điểm bất kỳ. Extended description .

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

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

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

Gọi lệnh này sau khi biểu đồ được vẽ.

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

Trả về toạ độ x của điểm ảnh dataValue tương ứng với cạnh trái của vùng chứa biểu đồ.

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

Gọi lệnh này sau khi biểu đồ được vẽ.

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

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

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

Gọi lệnh này sau khi biểu đồ được vẽ.

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

Xoá hành động trong chú giải công cụ với actionID được yêu cầu khỏi biểu đồ.

Loại trả lại hàng: none
setAction(action)

Đặt một hành động trong chú giải công cụ cần 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 của hành động đang được đặt, text – văn bản sẽ xuất hiện trong phần chú thích cho hành động và action – hàm sẽ được chạy khi người dùng nhấp vào văn bản hành động.

Bạn phải đặt mọi thao tác trong chú thích 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 trả lại hàng: none
setSelection()

Chọn các thực thể biểu đồ đã chỉ định. Huỷ 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 trả lại: không có
clearChart()

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

Loại trả lại: 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 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 đồ. Thông tin này có thể được dùng để xác định thời điểm người dùng nhấp vào tiêu đề, phần tử dữ liệu, mục chú giải, trục, đường lưới hoặc nhãn.

Tài sản: 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. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu. Mục nhập lát cắt hoặc chú giải tương ứng 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 ra khỏi một thực thể trực quan. Trả về các chỉ mục hàng và cột của phần tử tương ứng trong bảng dữ liệu. Mục nhập lát cắt hoặc chú giải tương ứng 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 đồ này đã 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 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 đã được chọn, hãy gọi hàm getSelection().

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

Chính sách về dữ liệu

Tất cả mã và dữ liệu đều được xử lý và hiển thị trong trình duyệt. Không có dữ liệu nào được gửi đến bất kỳ máy chủ nào.