การแสดงภาพ: แผนภูมิวงกลม

ภาพรวม

แผนภูมิวงกลมที่แสดงผลภายในเบราว์เซอร์โดยใช้ SVG หรือ VML แสดงเคล็ดลับเครื่องมือเมื่อวางเมาส์เหนือชิ้นส่วน

ตัวอย่าง

 
<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>

การสร้างแผนภูมิวงกลม 3 มิติ

หากคุณตั้งค่าตัวเลือก is3D เป็น true ระบบจะวาดแผนภูมิวงกลมเหมือนกับว่าจะมีมิติข้อมูล 3 รายการ ดังนี้

is3D คือ false โดยค่าเริ่มต้น เราจึงตั้งค่านี้เป็น 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>

การสร้างแผนภูมิโดนัท

แผนภูมิโดนัท คือแผนภูมิวงกลมที่มีรูอยู่ตรงกลาง คุณสามารถสร้างแผนภูมิโดนัทได้ด้วยตัวเลือก pieHole ดังนี้

ตัวเลือก pieHole ควรตั้งค่าระหว่าง 0 ถึง 1 ตามอัตราส่วนของรัศมีระหว่างรูกับแผนภูมิ ตัวเลขระหว่าง 0.4 ถึง 0.6 จะดูดีที่สุดในแผนภูมิส่วนใหญ่ ระบบจะไม่สนใจค่าที่เท่ากับหรือมากกว่า 1 และค่า 0 จะเป็นการปิดช่องโหว่ของคุณ

<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>

คุณไม่สามารถรวมตัวเลือก pieHole และ is3D ได้ หากมี pieHole จะถูกละเว้น

โปรดทราบว่า Google Charts จะพยายามวางป้ายกํากับให้ใกล้กับกึ่งกลางของชิ้นส่วนให้มากที่สุด หากคุณมีแผนภูมิโดนัทที่มีชิ้นส่วนเพียงชิ้นเดียว ตรงกลางของชิ้นส่วนอาจตกอยู่ในรูโดนัท ในกรณีดังกล่าว ให้เปลี่ยนสีป้ายกํากับ ดังนี้
ตัวเลือก
        var options = {
          pieHole: 0.5,
          pieSliceTextStyle: {
            color: 'black',
          },
          legend: 'none'
        };
HTML แบบเต็ม
<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>

การหมุนเวียนแผนภูมิวงกลม

โดยค่าเริ่มต้น แผนภูมิวงกลมจะขึ้นต้นด้วยขอบด้านซ้ายของชิ้นส่วนแรกที่ชี้ตรงไป คุณเปลี่ยนค่านี้ได้ด้วยตัวเลือก pieStartAngle ดังนี้

ในส่วนนี้ เราจะหมุนแผนภูมิตามเข็มนาฬิกา 100 องศาด้วยตัวเลือก pieStartAngle: 100 (จึงเลือกเนื่องจากมุมดังกล่าว ทําให้ป้ายกํากับ "อิตาลี" อยู่ในชิ้นส่วนนั้น)

<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>

การกําจัดส่วนแบ่ง

คุณแยกส่วนต่างๆ ของแผนภูมิออกจากส่วนที่เหลือของแผนภูมิได้ด้วยพร็อพเพอร์ตี้ offset ของตัวเลือก slices ดังนี้

หากต้องการแยกส่วน ให้สร้าง slices และกําหนดหมายเลขชิ้นส่วนที่ถูกต้อง offset ระหว่าง 0 ถึง 1 ด้านล่างเราจะกําหนดออฟเซ็ตที่ใหญ่ขึ้นอย่างต่อเนื่องให้กับชิ้นส่วน 4 (คุชราต), 12 (มาราฐี), 14 (โอริยา) และ 15 (ปัญจาบ) 

<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>

การนําส่วนแบ่งออก

หากต้องการยกเว้นส่วนแบ่ง ให้เปลี่ยนสีเป็น 'transparent' ดังนี้

นอกจากนี้ เรายังใช้ pieStartAngle เพื่อหมุนเวียนแผนภูมิ 135 องศา, pieSliceText เพื่อนําข้อความออกจากส่วนแบ่ง และ tooltip.trigger เพื่อปิดใช้งานเคล็ดลับเครื่องมือ:

<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>

เกณฑ์การมองเห็นส่วนแบ่ง

คุณกําหนดค่าเป็นเกณฑ์สําหรับส่วนแบ่งพายที่จะแสดงแต่ละรายการได้ ค่านี้สอดคล้องกับเศษส่วนของแผนภูมิ (โดยทั้งแผนภูมิจะมีค่าเป็น 1) หากต้องการตั้งเกณฑ์นี้เป็นเปอร์เซ็นต์ของผลรวม ให้หารเปอร์เซ็นต์ที่ต้องการด้วย 100 (สําหรับเกณฑ์ 20% ค่าจะเท่ากับ 0.2) 

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

ระบบจะนําส่วนแบ่งที่น้อยกว่าเกณฑ์นี้มาตัดเป็น "อื่นๆ" เพียงรายการเดียว ซึ่งจะมีค่ารวมของชิ้นส่วนทั้งหมดต่ํากว่าเกณฑ์ 

    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);
    }

กําลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "corechart"

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

ชื่อคลาสของการแสดงภาพคือ google.visualization.PieChart 

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

รูปแบบข้อมูล

แถว: แต่ละแถวในตารางแสดงส่วนแบ่ง

คอลัมน์

  คอลัมน์ 0 คอลัมน์ที่ 1 ... คอลัมน์ N (ไม่บังคับ)
จุดประสงค์ในการใช้: ป้ายกํากับส่วนแบ่ง ค่าส่วนแบ่ง ... บทบาทที่ไม่บังคับ
ประเภทข้อมูล: สตริง number ...
บทบาท: โดเมน ข้อมูล ...
บทบาทของคอลัมน์ที่ไม่บังคับ: ไม่มี ไม่มี ...

ตัวเลือกการกําหนดค่า

ชื่อ
สีพื้นหลัง

สีพื้นหลังของพื้นที่หลักของแผนภูมิ อาจเป็นสตริงสี HTML ที่เรียบง่าย เช่น 'red' หรือ '#00cc00' หรือออบเจ็กต์ที่มีพร็อพเพอร์ตี้ต่อไปนี้

ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "สีขาว"
พื้นหลังสีขีด

สีของเส้นขอบแผนภูมิเป็นสตริงสี HTML

ประเภท: สตริง
ค่าเริ่มต้น: "#666"
พื้นหลังของสี.ความกว้างความกว้าง

ความกว้างเส้นขอบเป็นพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
พื้นหลังสีเติม

สีเติมของแผนภูมิเป็นสตริงสี HTML

ประเภท: สตริง
ค่าเริ่มต้น: "สีขาว"
แผนภูมิพื้นที่

ออบเจ็กต์ที่มีสมาชิกในการกําหนดค่าตําแหน่งและขนาดของพื้นที่แผนภูมิ (ที่มีการวาดแผนภูมิเอง ยกเว้นแกนและคําอธิบาย) รองรับ 2 รูปแบบ ได้แก่ ตัวเลขหรือตัวเลขตามด้วย % ตัวเลขง่ายๆ คือค่าพิกเซล ตัวเลขตามด้วย % คือเปอร์เซ็นต์ เช่น chartArea:{left:20,top:0,width:'50%',height:'75%'}

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
แผนภูมิพื้นที่พื้นหลังพื้นหลัง
สีพื้นหลังของแผนภูมิ เมื่อใช้สตริง อาจเป็นสตริงเลขฐานสิบหก (เช่น "#fdc") หรือชื่อสีภาษาอังกฤษ เมื่อใช้ออบเจ็กต์ คุณจะระบุพร็อพเพอร์ตี้ต่อไปนี้ได้
  • stroke: สีที่ระบุเป็นสตริงเลขฐานสิบหกหรือชื่อสีภาษาอังกฤษ
  • strokeWidth: หากวาด ให้วาดเส้นขอบรอบๆ พื้นที่แผนภูมิของความกว้างที่ระบุ (และใช้สี stroke)
ประเภท: สตริงหรือออบเจ็กต์
ค่าเริ่มต้น: "สีขาว"
แผนภูมิพื้นที่ซ้าย

วิธีการวาดแผนภูมิจากเส้นขอบด้านซ้าย

ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
แผนภูมิพื้นที่

วิธีการวาดแผนภูมิจากเส้นขอบด้านบน

ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
พื้นที่แผนภูมิ

ความกว้างของพื้นที่แผนภูมิ

ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
พื้นที่แผนภูมิ

ความสูงของพื้นที่แผนภูมิ

ประเภท: ตัวเลขหรือสตริง
ค่าเริ่มต้น: อัตโนมัติ
สี

สีที่ใช้สําหรับองค์ประกอบของแผนภูมิ อาร์เรย์ของสตริง ซึ่งเอลิเมนต์แต่ละรายการเป็นสตริงสี HTML เช่น colors:['red','#004411']

ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: สีเริ่มต้น
เปิดใช้การโต้ตอบ

แผนภูมินี้ทําให้เกิดเหตุการณ์ของผู้ใช้หรือตอบสนองต่อการโต้ตอบของผู้ใช้ หากเป็นเท็จ แผนภูมิจะไม่ส่ง "เลือก" หรือเหตุการณ์อื่นๆ ที่อิงตามการโต้ตอบ (แต่จะส่งเหตุการณ์ที่พร้อมแสดงหรือมีข้อผิดพลาด) และจะไม่แสดงข้อความที่แสดงเมื่อเลื่อนเมาส์ผ่าน หรือมีการเปลี่ยนแปลงโดยขึ้นอยู่กับอินพุตของผู้ใช้

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
ขนาดแบบอักษร

ขนาดแบบอักษรเริ่มต้น (หน่วยเป็นพิกเซล) ของข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สําหรับองค์ประกอบแผนภูมิบางรายการ

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
ชื่อแบบอักษร

แบบอักษรเริ่มต้นของข้อความทั้งหมดในแผนภูมิ คุณลบล้างค่านี้ได้โดยใช้พร็อพเพอร์ตี้สําหรับองค์ประกอบแผนภูมิบางรายการ

ประเภท: สตริง
ค่าเริ่มต้น: "eCPM"
ForceIFrame

วาดแผนภูมิภายในเฟรมแบบอินไลน์ (โปรดทราบว่าใน IE8 ระบบจะละเว้นตัวเลือกนี้ แผนภูมิ IE8 ทั้งหมดจะวาดใน i-frame)

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
ความสูง

ความสูงของแผนภูมิเป็นพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: ความสูงขององค์ประกอบที่มี
3 มิติ

หากเป็น "จริง" จะแสดงแผนภูมิแบบ 3 มิติ

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
คําอธิบาย

ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าแง่มุมต่างๆ ของคําอธิบาย หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้รูปแบบสัญพจน์ของออบเจ็กต์ได้ ดังที่แสดงด้านล่างนี้ 

{position: 'top', textStyle: {color: 'blue', fontSize: 16}}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
Legend.alignment

การจัดเรียงคําอธิบาย อาจมีสถานะใดสถานะหนึ่งต่อไปนี้

  • "start" - สอดคล้องกับจุดเริ่มต้นของพื้นที่ที่จัดสรรสําหรับคําอธิบาย
  • "center" - อยู่ตรงกลางในพื้นที่ที่จัดสรรให้กับคําอธิบาย
  • "end" - สอดคล้องกับส่วนท้ายของพื้นที่ที่จัดสรรให้กับคําอธิบาย

จุดเริ่มต้น กึ่งกลาง และจุดสิ้นสุดจะสัมพันธ์กับรูปแบบ เช่น แนวตั้งหรือแนวนอนของคําอธิบาย เช่น ในตํานาน "เริ่มต้น" "เริ่มต้น" และ "สิ้นสุด" อยู่ที่ด้านบนและด้านล่างตามลําดับ สําหรับคําอธิบาย "ด้านบน" "เริ่มต้น" และ "สิ้นสุด" อยู่ทางด้านซ้ายและขวาของพื้นที่นั้นตามลําดับ

ค่าเริ่มต้นจะขึ้นอยู่กับตําแหน่งของคําอธิบาย สําหรับคําอธิบาย "ด้านล่าง" ค่าเริ่มต้นจะเป็น "ตรงกลาง" แต่คําอธิบายอื่นๆ จะมีค่าเริ่มต้นเป็น "เริ่มต้น"

ประเภท: สตริง
ค่าเริ่มต้น: อัตโนมัติ
ตําแหน่ง.

ตําแหน่งของคําอธิบาย อาจมีสถานะใดสถานะหนึ่งต่อไปนี้

  • "bottom" - แสดงคําอธิบายด้านล่างแผนภูมิ
  • "ติดป้ายกํากับ" - วาดเส้นที่เชื่อมต่อชิ้นส่วนกับค่าข้อมูล
  • "ซ้าย" - แสดงคําอธิบายทางด้านซ้ายของแผนภูมิ
  • "none" - ไม่แสดงคําอธิบาย
  • "ขวา" - แสดงคําอธิบายแผนภูมิที่ถูกต้อง
  • "ด้านบน" - แสดงคําอธิบายเหนือแผนภูมิ
ประเภท: สตริง
ค่าเริ่มต้น: "ขวา"
vibe.maxLines

จํานวนบรรทัดสูงสุดในคําอธิบาย ตั้งค่านี้เป็นตัวเลขที่มากกว่า 1 บรรทัดเพื่อเพิ่มบรรทัดในคําอธิบาย หมายเหตุ: ตรรกะที่ใช้พิจารณาจํานวนบรรทัดจริงที่แสดงผลยังคงเป็น Flux

ปัจจุบันตัวเลือกนี้ใช้งานได้เฉพาะเมื่อตํานาน 'ตําแหน่ง' เป็น "ด้านบน"

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
คําอธิบายข้อความรูปแบบ

ออบเจ็กต์ที่ระบุรูปแบบข้อความของคําอธิบาย ออบเจ็กต์มีรูปแบบต่อไปนี้

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

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' โปรดดู fontName และ fontSize

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
แผนภูมิวงกลม

หากอยู่ระหว่าง 0 ถึง 1 จะแสดงแผนภูมิโดนัท ช่องที่มีรัศมีเท่ากับ number ของรัศมีของแผนภูมิ

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
พายเส้นขอบสี

สีของเส้นขอบของชิ้นส่วน ใช้ได้เฉพาะเมื่อแผนภูมิเป็นแบบ 2 มิติ

ประเภท: สตริง
ค่าเริ่มต้น: "สีขาว"
แผนภูมิวงกลม

เนื้อหาของข้อความที่แสดงในส่วนแบ่ง อาจมีสถานะใดสถานะหนึ่งต่อไปนี้

  • 'percentage' - เปอร์เซ็นต์ของขนาดส่วนแบ่งจากทั้งหมด
  • 'value' - ค่าเชิงปริมาณของชิ้นส่วน
  • 'label' - ชื่อของสไลซ์
  • "none" - จะไม่แสดงข้อความ
ประเภท: สตริง
ค่าเริ่มต้น: "เปอร์เซ็นต์"
รูปแบบแผนภูมิวงกลม

ออบเจ็กต์ที่ระบุรูปแบบข้อความของสไลซ์ ออบเจ็กต์มีรูปแบบต่อไปนี้

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

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' โปรดดู fontName และ fontSize

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
แผนภูมิวงกลมเริ่ม

มุมในหน่วยองศาเพื่อหมุนแผนภูมิ ค่าเริ่มต้นของ 0 จะตามแนวขอบซ้ายสุดของชิ้นส่วนแรกโดยตรง

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
หมวดหมู่ย้อนกลับ

หากเป็น "จริง" ให้วาดชิ้นส่วนทวนเข็มนาฬิกา ค่าเริ่มต้นคือวาดตามเข็มนาฬิกา

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
พายเรซิดสี

สีสําหรับส่วนแบ่งชุดค่าผสมที่มีส่วนแบ่งทั้งหมดต่ํากว่า sliceViewableThreshold

ประเภท: สตริง
ค่าเริ่มต้น: '#ccc'
แผนภูมิวงกลมซ้ํา

ป้ายกํากับสําหรับส่วนชุดค่าผสมที่มีการแบ่งส่วนทั้งหมดด้านล่าง sliceViewableThreshold

ประเภท: สตริง
ค่าเริ่มต้น: "อื่นๆ"
ส่วนแบ่ง

อาร์เรย์ของออบเจ็กต์ แต่ละรายการอธิบายรูปแบบของชิ้นส่วนที่เกี่ยวข้องในพาย หากต้องการใช้ค่าเริ่มต้นสําหรับส่วนแบ่ง ให้ระบุออบเจ็กต์ที่ว่างเปล่า (เช่น {}) หากไม่ได้ระบุส่วนแบ่งหรือค่า ระบบจะใช้ค่าส่วนกลาง ออบเจ็กต์แต่ละรายการรองรับพร็อพเพอร์ตี้ต่อไปนี้

  • color - สีที่จะใช้สําหรับสไลซ์นี้ ระบุสตริงสี HTML ที่ถูกต้อง
  • offset - ระยะห่างจากพายที่เหลืออยู่ตั้งแต่ 0.0 (ไม่ใช่เลย) ถึง 1.0 (รัศมีของพาย)
  • textStyle - ลบล้าง pieSliceTextStyle ทั่วโลกสําหรับส่วนแบ่งนี้

คุณระบุอาร์เรย์ของออบเจ็กต์โดยแต่ละรายการจะนําไปใช้กับส่วนแบ่งตามลําดับที่ระบุ หรือจะระบุออบเจ็กต์ที่ออบเจ็กต์ย่อยแต่ละรายการมีคีย์ตัวเลขที่ระบุชิ้นส่วนดังกล่าวที่ใช้ได้ เช่น การประกาศ 2 รายการต่อไปนี้เหมือนกัน และประกาศส่วนแรกเป็นสีดําและรายการที่ 4 เป็นสีแดง 

slices: [{color: 'black'}, {}, {}, {color: 'red'}]
slices: {0: {color: 'black'}, 3: {color: 'red'}}
ประเภท: อาร์เรย์ของออบเจ็กต์หรือออบเจ็กต์ที่มีออบเจ็กต์ที่ซ้อนกัน
ค่าเริ่มต้น: {}
เกณฑ์ระดับการมองเห็น

ค่าเศษของพายด้านล่างที่ส่วนแบ่งไม่แสดงทีละรายการ ระบบจะนําส่วนแบ่งทั้งหมดที่ไม่ผ่านเกณฑ์นี้มารวมเป็นส่วน "อื่นๆ" ซึ่งมีขนาดเป็นผลรวมของขนาดทั้งหมด ค่าเริ่มต้นต้องไม่แสดงเดี่ยวๆ ที่มีขนาดเล็กกว่าครึ่งองศา 

// Slices less than 25% of the pie will be
// combined into an "Other" slice.
sliceVisibilityThreshold: .25
ประเภท: ตัวเลข
ค่าเริ่มต้น: ครึ่งองศา (.5/360 หรือ 1/720 หรือ .0014)
title

ข้อความที่จะแสดงเหนือแผนภูมิ

ประเภท: สตริง
ค่าเริ่มต้น: ไม่มีชื่อ
รูปแบบข้อความชื่อ

ออบเจ็กต์ที่ระบุรูปแบบข้อความชื่อ ออบเจ็กต์มีรูปแบบต่อไปนี้

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

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' โปรดดู fontName และ fontSize

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
เคล็ดลับเครื่องมือ

ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าองค์ประกอบเคล็ดลับเครื่องมือต่างๆ หากต้องการระบุพร็อพเพอร์ตี้ของออบเจ็กต์นี้ คุณใช้สัญพจน์ของออบเจ็กต์ได้ ดังที่แสดงด้านล่างนี้ 

{textStyle: {color: '#FF0000'}, showColorCode: true}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
troubleshooter.ignoreBounds

หากตั้งค่าเป็น true จะอนุญาตให้แสดงเคล็ดลับเครื่องมือออกนอกกรอบของแผนภูมิในทุกด้าน

หมายเหตุ: วิธีนี้ใช้ได้กับเคล็ดลับเครื่องมือ HTML เท่านั้น หากเปิดใช้ด้วยเคล็ดลับเครื่องมือ SVG ระบบจะครอบตัดรายการที่อยู่นอกขอบเขตแผนภูมิ ดูรายละเอียดเพิ่มเติมได้ในการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
troubleshooter.isHtml

หากตั้งค่าเป็น "จริง" ให้ใช้เคล็ดลับเครื่องมือ HTML ที่แสดงผล (แทนการแสดงผลที่แสดงผล SVG) ดูรายละเอียดเพิ่มเติมได้ในการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ

หมายเหตุ: ฟีเจอร์ลูกโป่งลูกโป่งจะไม่รองรับการปรับแต่งเนื้อหาเคล็ดลับเครื่องมือ HTML ผ่านบทบาทข้อมูลคอลัมน์เคล็ดลับเครื่องมือ

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
troubleshooter.showColorCode

หากเป็น "จริง" จะแสดงสี่เหลี่ยมจัตุรัสสีข้างข้อมูลชิ้นส่วนในเคล็ดลับเครื่องมือ

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
เคล็ดลับเครื่องมือ

ข้อมูลที่จะแสดงเมื่อผู้ใช้วางเมาส์เหนือแผนภูมิวงกลม ระบบรองรับค่าต่อไปนี้

  • "ทั้งสอง" - [ค่าเริ่มต้น] แสดงทั้งค่าสัมบูรณ์ของส่วนแบ่งและเปอร์เซ็นต์ของผลรวม
  • "value" - แสดงเฉพาะค่าสัมบูรณ์ของส่วนย่อย
  • "percentage" - แสดงเฉพาะเปอร์เซ็นต์ของทั้งสัดส่วนที่แบ่งเป็นส่วน
ประเภท: สตริง
ค่าเริ่มต้น: 'ทั้ง'
troubleshooter.textStyle

ออบเจ็กต์ที่ระบุรูปแบบข้อความเคล็ดลับเครื่องมือ ออบเจ็กต์มีรูปแบบต่อไปนี้

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

color อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00' โปรดดู fontName และ fontSize

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: {color: 'black', fontName: <global-font-name>, fontSize: <global-font-size>}
เคล็ดลับเครื่องมือ

การโต้ตอบของผู้ใช้ที่ทําให้เคล็ดลับเครื่องมือแสดง

  • "highlight" - เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบ
  • "none" - เคล็ดลับเครื่องมือจะไม่แสดง
  • "selection" - เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้เลือกองค์ประกอบ
ประเภท: สตริง
ค่าเริ่มต้น: "โฟกัส"
ความกว้าง

ความกว้างของแผนภูมิเป็นพิกเซล

ประเภท: ตัวเลข
ค่าเริ่มต้น: ความกว้างขององค์ประกอบที่มี

เมธอด

วิธีการ
draw(data, options)

วาดแผนภูมิ แผนภูมินี้ยอมรับการเรียกใช้เมธอดเพิ่มเติมหลังจากที่เหตุการณ์ ready เริ่มทํางานเท่านั้น Extended description

ประเภทการคืนสินค้า: ไม่มี
getAction(actionID)

แสดงผลออบเจ็กต์การดําเนินการเคล็ดลับเครื่องมือด้วย actionID ที่ขอ

ประเภทการแสดงผล: ออบเจ็กต์
getBoundingBox(id)

แสดงผลออบเจ็กต์ที่มีด้านซ้าย ด้านบน ความกว้าง และความสูงขององค์ประกอบแผนภูมิ id รูปแบบสําหรับ id ยังไม่ได้รับการบันทึก (เป็นค่าแสดงผลของเครื่องจัดการเหตุการณ์) แต่ตัวอย่างเช่น

var cli = chart.getChartLayoutInterface();

ความสูงของพื้นที่แผนภูมิ
cli.getBoundingBox('chartarea').height
ความกว้างของแถบที่ 3 ในชุดแรกของแผนภูมิแท่งหรือคอลัมน์
cli.getBoundingBox('bar#0#2').width
กรอบล้อมรอบลิ้นที่ 5 ของแผนภูมิวงกลม
cli.getBoundingBox('slice#4')
กรอบล้อมรอบของข้อมูลแผนภูมิของแผนภูมิประเภทธุรกิจ (เช่น คอลัมน์)
cli.getBoundingBox('vAxis#0#gridline')
กรอบล้อมรอบของข้อมูลแผนภูมิของแผนภูมิแนวนอน (เช่น บาร์)
cli.getBoundingBox('hAxis#0#gridline')

ค่าจะสัมพันธ์กับคอนเทนเนอร์ของแผนภูมิ เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทการแสดงผล: ออบเจ็กต์
getChartAreaBoundingBox()

แสดงออบเจ็กต์ที่มีด้านซ้าย ด้านบน ความกว้าง และความสูงของเนื้อหาแผนภูมิ (เช่น ไม่รวมป้ายกํากับและคําอธิบาย)

var cli = chart.getChartLayoutInterface();

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

ค่าจะสัมพันธ์กับคอนเทนเนอร์ของแผนภูมิ เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทการแสดงผล: ออบเจ็กต์
getChartLayoutInterface()

แสดงผลออบเจ็กต์ที่มีข้อมูลเกี่ยวกับตําแหน่งบนหน้าจอของแผนภูมิและองค์ประกอบ

สามารถเรียกเมธอดต่อไปนี้ในออบเจ็กต์ที่แสดงผลได้

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

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทการแสดงผล: ออบเจ็กต์
getHAxisValue(xPosition, optional_axis_index)

แสดงผลค่าข้อมูลแนวนอนที่ xPosition ซึ่งเป็นการชดเชยพิกเซลจากขอบด้านซ้ายของคอนเทนเนอร์แผนภูมิ อาจเป็นค่าลบ

ตัวอย่าง: chart.getChartLayoutInterface().getHAxisValue(400)

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทการแสดงผล: จํานวน
getImageURI()

แสดงผลแผนภูมิที่เรียงลําดับเป็น URI รูปภาพ

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ดูการพิมพ์แผนภูมิ PNG

ประเภทการแสดงผล: สตริง
getSelection()

แสดงผลอาร์เรย์ของเอนทิตีแผนภูมิที่เลือก เอนทิตีที่เลือกได้คือส่วนย่อยและรายการในคําอธิบาย สําหรับแผนภูมินี้ คุณจะเลือกเอนทิตีได้เพียงรายการเดียวในช่วงเวลาที่กําหนด Extended description

ประเภทการแสดงผล: อาร์เรย์ขององค์ประกอบการเลือก
getVAxisValue(yPosition, optional_axis_index)

แสดงผลค่าข้อมูลแนวตั้งที่ yPosition ซึ่งเป็นออฟเซ็ตพิกเซลจากขอบบนของคอนเทนเนอร์แผนภูมิ อาจเป็นค่าลบ

ตัวอย่าง: chart.getChartLayoutInterface().getVAxisValue(300)

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทการแสดงผล: จํานวน
getXLocation(dataValue, optional_axis_index)

แสดงผลพิกัดพิกเซล x ของ dataValue ที่สัมพันธ์กับขอบด้านซ้ายของคอนเทนเนอร์ของแผนภูมิ

ตัวอย่าง: chart.getChartLayoutInterface().getXLocation(400)

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทการแสดงผล: จํานวน
getYLocation(dataValue, optional_axis_index)

แสดงผลพิกัด y ของพิกเซล y ของ dataValue เมื่อเทียบกับขอบบนสุดของคอนเทนเนอร์ของแผนภูมิ

ตัวอย่าง: chart.getChartLayoutInterface().getYLocation(300)

เรียกใช้หลังจากที่มีการวาดแผนภูมิ

ประเภทการแสดงผล: จํานวน
removeAction(actionID)

นําการดําเนินการเคล็ดลับเครื่องมือที่มี actionID ที่ขอออกจากแผนภูมิ

ประเภทการแสดงผล: none
setAction(action)

ตั้งค่าการทํางานของเคล็ดลับเครื่องมือที่จะเรียกใช้เมื่อผู้ใช้คลิกข้อความการดําเนินการ

เมธอด setAction จะใช้ออบเจ็กต์เป็นพารามิเตอร์การดําเนินการ ออบเจ็กต์นี้ควรระบุพร็อพเพอร์ตี้ 3 รายการ ได้แก่ id ซึ่งเป็นรหัสของการดําเนินการที่ตั้งไว้ text — ข้อความที่ควรปรากฏในเคล็ดลับเครื่องมือสําหรับการดําเนินการ และ action ซึ่งก็คือฟังก์ชันที่ควรเรียกใช้เมื่อผู้ใช้คลิกข้อความการดําเนินการ

ควรตั้งค่าการทํางานของเคล็ดลับเครื่องมือทั้งหมดก่อนเรียกใช้เมธอด draw() ของแผนภูมิ คําอธิบายแบบขยาย

ประเภทการแสดงผล: none
setSelection()

เลือกเอนทิตีของแผนภูมิที่ระบุ ยกเลิกรายการที่เลือกก่อนหน้า เอนทิตีที่เลือกได้คือส่วนย่อยและรายการในคําอธิบาย สําหรับแผนภูมินี้ คุณจะเลือกเอนทิตีได้ครั้งละ 1 รายการเท่านั้น Extended description

ประเภทการคืนสินค้า: ไม่มี
clearChart()

ล้างแผนภูมิและปล่อยทรัพยากรที่จัดสรรไว้ทั้งหมด

ประเภทการคืนสินค้า: ไม่มี

เหตุการณ์

ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้เหตุการณ์เหล่านี้ได้ที่การโต้ตอบพื้นฐาน การจัดการเหตุการณ์ และเหตุการณ์เริ่มทํางาน

ชื่อ
click

เริ่มทํางานเมื่อผู้ใช้คลิกภายในแผนภูมิ ใช้เพื่อระบุได้เมื่อมีการคลิกชื่อ องค์ประกอบข้อมูล รายการคําอธิบาย แกน ตารางกริด หรือป้ายกํากับ

พร็อพเพอร์ตี้: targetID
error

เริ่มทํางานเมื่อเกิดข้อผิดพลาดเมื่อพยายามแสดงผลแผนภูมิ

พร็อพเพอร์ตี้: รหัส ข้อความ
onmouseover

เริ่มทํางานเมื่อผู้ใช้วางเมาส์เหนือเอนทิตีภาพ ส่งคืนดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง รายการส่วนย่อยหรือคําอธิบายสัมพันธ์กับแถวในตารางข้อมูล (ดัชนีคอลัมน์เป็นค่าว่าง)

พร็อพเพอร์ตี้: แถว, คอลัมน์
onmouseout

เริ่มทํางานเมื่อผู้ใช้เลื่อนเมาส์ออกจากเอนทิตีภาพ ส่งคืนดัชนีแถวและคอลัมน์ขององค์ประกอบตารางข้อมูลที่เกี่ยวข้อง รายการส่วนย่อยหรือคําอธิบายสัมพันธ์กับแถวในตารางข้อมูล (ดัชนีคอลัมน์เป็นค่าว่าง)

พร็อพเพอร์ตี้: แถว, คอลัมน์
ready

แผนภูมินี้พร้อมสําหรับการเรียกใช้เมธอดภายนอกแล้ว หากต้องการโต้ตอบกับแผนภูมิและวิธีการโทรหลังจากที่วาดแล้ว คุณควรตั้งค่า Listener สําหรับเหตุการณ์นี้ก่อนที่เรียกใช้เมธอด draw และเรียกใช้หลังจากที่เหตุการณ์เริ่มทํางานเท่านั้น

พร็อพเพอร์ตี้: ไม่มี
select

เริ่มทํางานเมื่อผู้ใช้คลิกเอนทิตีภาพ หากต้องการดูข้อมูลที่ได้รับเลือก โปรดโทรหา getSelection()

พร็อพเพอร์ตี้: ไม่มี

นโยบายข้อมูล

โค้ดและข้อมูลทั้งหมดจะได้รับการประมวลผลและแสดงผลในเบราว์เซอร์ ทั้งนี้จะไม่มีการส่งข้อมูลไปยังเซิร์ฟเวอร์ใดๆ