การแสดงภาพ: แผนภูมิรูปภาพทั่วไป

สําคัญ: ตั้งแต่วันที่ 20 เมษายน 2012 เราได้เลิกใช้งานส่วน "แผนภูมิรูปภาพ" ของเครื่องมือแผนภูมิของ Google เลิกใช้งานอย่างเป็นทางการแล้ว และจะทํางานต่อไปตามนโยบายการเลิกใช้งาน

  1. ภาพรวม
  2. ตัวอย่าง
  3. กำลังโหลด
  4. รูปแบบข้อมูล
  5. ตัวเลือกการกําหนดค่า
  6. เมธอด
  7. เหตุการณ์
  8. นโยบายข้อมูล
  9. การแปล

ภาพรวม

แผนภูมิรูปภาพทั่วไปเป็น Wrapper ทั่วไปสําหรับแผนภูมิทั้งหมดที่สร้างโดย Google Chart API โปรดอ่านเอกสาร Chart API ก่อนพยายามใช้การแสดงภาพนี้ คุณส่งข้อมูลได้สูงสุด 16, 000 ครั้งโดยใช้การแสดงภาพนี้ ซึ่งต่างจากการจํากัดการเรียก 2K ไปยัง Chart API

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

พารามิเตอร์ของ URL ของแผนภูมิอื่นๆ ทั้งหมด (ยกเว้น chd) จะส่งผ่านเป็นตัวเลือก

โดย Google

ตัวอย่าง

ต่อไปนี้เป็นตัวอย่างของแผนภูมิประเภทต่างๆ

แผนภูมิเส้น

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addColumn('string');

        // Row data is [chl, data point, point label]
        dataTable.addRows([
        ['January',40,undefined],
        ['February',60,'Initial recall'],
        ['March',60,'Product withdrawn'],
        ['April',45,undefined],
        ['May',47,'Relaunch'],
        ['June',75,undefined],
        ['July',70,undefined],
        ['August',72,undefined]
        ]);

        var options = {cht: 'lc', chds:'0,160', annotationColumns:[{column:2, size:12, type:'flag', priority:'high'},]};

        var chart = new google.visualization.ImageChart(document.getElementById('line_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='line_div'></div>
  </body>
</html>

แผนภูมิแท่งแนวตั้ง

โปรดทราบว่าในแผนภูมิแท่งที่รวมอยู่ คุณไม่จําเป็นต้องระบุ chxt='x' เช่นเดียวกับที่คุณจะเรียกใช้แผนภูมิด้วยตนเอง หากไม่ได้ระบุแกน แผนภูมิรูปภาพทั่วไปจะพยายามตั้งค่าแผนภูมิให้ถูกต้องโดยค่าเริ่มต้น

<html>
  <head>
    <script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
    <script type='text/javascript'>
    google.charts.load("current", {packages:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht: 'bvs', chs: '300x125', colors:['#4D89F9','#C6D9FD'],
          chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|'};

        var chart = new google.visualization.ImageChart(document.getElementById('bar_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='bar_div'></div>
  </body>
</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:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
        function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['January',12],
          ['February',8],
          ['March',3]
        ]);

        var options = {cht: 'p', title: 'Sales per Month', chp: 0.628, chs: '400x200',
          colors:['#3399CC','#00FF00','#0000FF']};

        var chart = new google.visualization.ImageChart(document.getElementById('pie_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='pie_div'></div>
  </body>
</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:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [100,10],
          [80,20],
          [60,30],
          [30,40],
          [25,50],
          [20,60],
          [10,70]
        ]);

        var chart = new google.visualization.ImageChart(document.getElementById('radar_div'));

        var options = {cht: 'rs', chco: '00FF00,FF00FF', chg: '25.0,25.0,4.0,4.0', chm: 'B,FF000080,0,1.0,5.0|B,FF990080,1,1.0,5.0',};
        chart.draw(dataTable, options);
      }
    </script>
  </head>
  <body>
    <div id='radar_div'></div>
  </body>
</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:["imagechart"]});
    </script>
    <script type='text/javascript'>
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('string');
        dataTable.addColumn('number');
        dataTable.addRows([
          ['DZ',0],
          ['EG',50],
          ['MG',50],
          ['GM',35],
          ['KE',100],
          ['ZA',100]
        ]);

        var options = {cht: 't', chtm: 'africa', chco: '777777,FFC6A5,FF0000', chs: '440x220'};
        var chart = new google.visualization.ImageChart(document.getElementById('map_div'));
        chart.draw(dataTable, options);
      }
    </script>
  </head>
<body>
    <div id='map_div'></div>
</body>
</html>

กําลังโหลด

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

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

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

  var visualization = new google.visualization.ImageChart(container_div);

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

ข้อมูลทั่วไปมี 2 รูปแบบ ได้แก่ รูปแบบสําหรับแผนภูมิแผนที่และอีกรูปแบบสําหรับแผนภูมิอื่นๆ โปรดทราบว่ารูปแบบตัวเลขเดียวที่ระบบรองรับสําหรับข้อมูลคือประเภทตัวเลข JavaScript

หมายเหตุ คุณควรไม่เข้ารหัสค่าสตริงใดๆ ที่ส่งผ่านเป็นข้อมูลหรือตัวเลือก

แผนภูมิแผนที่

แผนภูมิแผนที่มีตารางข้อมูลที่มี 2 คอลัมน์ที่จําเป็น ได้แก่

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

แผนภูมิที่ไม่ใช่แผนที่

แผนภูมิที่ไม่ใช่แผนที่จะใช้ตารางข้อมูลที่มี 2 คอลัมน์ที่ไม่บังคับ (คอลัมน์แรกจะแสดงที่คอลัมน์หนึ่ง) และคอลัมน์ข้อมูลอย่างน้อย 1 คอลัมน์ในระหว่างนั้น

  • คอลัมน์แรก - [ไม่บังคับ สตริง] แต่ละรายการจะแสดงป้ายกํากับที่ใช้ในแกน X (เทียบเท่ากับพารามิเตอร์ chl หรือ chxl) สําหรับแผนภูมิที่รองรับ
  • คอลัมน์ถัดไป - คอลัมน์ตัวเลขจํานวนเท่าใดก็ได้ โดยแต่ละคอลัมน์จะแสดงชุดข้อมูล
  • คอลัมน์สุดท้าย - [ไม่บังคับ, สตริง] จํานวนคอลัมน์สตริงหลังคอลัมน์ข้อมูล โดยข้อมูลแต่ละรายการจะแสดงป้ายกํากับจุดข้อมูลสําหรับแผนภูมิที่รองรับ หากต้องการใช้คอลัมน์นี้ คุณต้องระบุตัวเลือก annotationColumns

ข้อมูลจะแสดงในรูปแบบที่แตกต่างกัน ทั้งนี้ขึ้นอยู่กับประเภทของแผนภูมิ ดูเอกสารประกอบของแผนภูมิ

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

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

มีตัวเลือกดังต่อไปนี้สําหรับการแสดงภาพนี้ กําหนดออบเจ็กต์เหล่านี้ในออบเจ็กต์ตัวเลือกที่ส่งไปยังเมธอด draw() ของการแสดงภาพ ตัวเลือกบางประเภทต่อไปนี้ไม่รองรับแผนภูมิบางประเภท โปรดดูเอกสารประกอบของประเภทแผนภูมิแบบคงที่ คุณสามารถส่งพารามิเตอร์ของ URL ของ Chart API ใดก็ได้เป็นตัวเลือก เช่น ระบบจะระบุพารามิเตอร์ของ URL chg=50,50 จากการแสดงภาพแผนภูมิด้วยวิธีนี้ options['chg'] = '50,50'

หมายเหตุเกี่ยวกับสี: ตัวเลือกสี เช่น colors, color และ backgroundColor อยู่ในรูปแบบสี API ของแผนภูมิ รูปแบบนี้คล้ายกับรูปแบบ #RRGGBB เว้นแต่จะมีตัวเลขฐานสิบหกที่ 4 ที่ไม่บังคับเพื่อแสดงถึงความโปร่งใส ระบบไม่รองรับสีที่มนุษย์อ่านได้ เช่น "แดง" "เขียว" "น้ําเงิน" เป็นต้น รูปแบบสี API ของแผนภูมิไม่มีสัญลักษณ์ # นําหน้า แต่ตัวเลือกการแสดงภาพแผนภูมิทั่วไปจะยอมรับรหัสสีที่มีหรือไม่มี #

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
คอลัมน์หมายเหตุ อาร์เรย์<object> ไม่มี

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

ออบเจ็กต์แต่ละรายการในอาร์เรย์มีพร็อพเพอร์ตี้ต่อไปนี้

  • column [ตัวเลข] - ดัชนีตามศูนย์ของคอลัมน์ที่มีข้อความที่ใช้อยู่ในคําอธิบายประกอบ คุณไม่จําเป็นต้องระบุค่าในแต่ละแถวของคอลัมน์นี้
  • positionColumn [จํานวน] - ดัชนีตามศูนย์ของคอลัมน์ที่ใช้จุดข้อมูลที่ติดป้ายกํากับ ค่าเริ่มต้นคือคอลัมน์ข้อมูลแรก
  • color [string] - สีของข้อความคําอธิบายประกอบในรูปแบบสี API ของแผนภูมิ ค่าเริ่มต้นคือ "#000000" (สีดํา)
  • size [number] - ขนาดแบบอักษรของคําอธิบายประกอบเป็นพิกเซล
  • priority [string] - 'ต่ํา', 'กลาง' หรือ 'สูง' โดยระบุเลเยอร์ที่ควรวาดป้ายกํากับ ค่าเริ่มต้นคือ "สื่อ" ซึ่งระบุว่าจะมีการวาดป้ายกํากับหลังบาร์และเส้น แต่อยู่ก่อนป้ายกํากับอื่นๆ
  • type [สตริง] - อาจเป็น "ข้อความ" หรือ "แจ้งว่าไม่เหมาะสม" "text" จะสร้างคําอธิบายประกอบข้อความธรรมดาและ "flag" จะสร้างคําอธิบายประกอบบอลลูนคําพูด

ตัวอย่าง - ข้อมูลโค้ดนี้กําหนดป้ายกํากับข้อความสีดําขนาด 12 พิกเซล โดยแสดงข้อความจากคอลัมน์ 0 และกําหนดให้จุดข้อมูลในคอลัมน์ 2 ของแถวเดียวกัน: options['annotationColumns'] = [{column: 2, positionColumn: 0, color: '#000000', size: '12', priority: 'high', type: 'text'}];
สีพื้นหลัง สตริง "#FFFFFF" (สีขาว) สีพื้นหลังของแผนภูมิในรูปแบบสี API ของแผนภูมิ
สี สตริง อัตโนมัติ ระบุสีฐานที่จะใช้กับชุดหนังสือแต่ละชุด สีจะระบุอยู่ในรูปแบบสี API ของแผนภูมิ ระบบจะละเว้นหากระบุ colors
สี อาร์เรย์<string> อัตโนมัติ ใช้เพื่อกําหนดสีเฉพาะให้กับชุดข้อมูลแต่ละชุด สีระบุอยู่ในรูปแบบสี API ของแผนภูมิ สี i ใช้กับคอลัมน์ข้อมูล i ซึ่งล้อมรอบจุดเริ่มต้นหากมีคอลัมน์ข้อมูลมากกว่าสี หากชุดสีเดียวยอมรับได้ทุกชุด ให้ใช้ตัวเลือก color แทน
เปิดใช้เหตุการณ์ บูลีน เท็จ ทําให้แผนภูมิส่งเหตุการณ์ที่ทริกเกอร์ผู้ใช้ เช่น การคลิกหรือเมาส์ รองรับเฉพาะแผนภูมิบางประเภทเท่านั้น ดูเหตุการณ์ด้านล่าง
เติม บูลีน เท็จ หากเป็น "จริง" โปรดกรอกพื้นที่ใต้แต่ละบรรทัด ใช้ได้สําหรับแผนภูมิเส้นเท่านั้น
คอลัมน์ที่ซ่อนแรก number ไม่มี

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

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

  • "none" - ไม่มีป้ายกํากับ
  • 'value' - แสดงค่าส่วนแบ่งเป็นป้ายกํากับ
  • "name" - แสดงชื่อส่วนย่อย (ชื่อคอลัมน์) เป็นป้ายกํากับ
คําอธิบาย สตริง "ขวา" ตําแหน่งในการแสดงคําอธิบายแผนภูมิเมื่อเทียบกับแผนภูมิ ระบุรายการใดรายการหนึ่งต่อไปนี้ "ด้านบน" "ด้านล่าง" "ซ้าย" "ขวา" "ไม่มี" ละเว้นในแผนภูมิที่ไม่มีคําอธิบาย (เช่น แผนภูมิแผนที่)
สูงสุด number ค่าข้อมูลสูงสุด ค่าสูงสุดที่แสดงในสเกล ละเว้นสําหรับแผนภูมิวงกลม ค่าเริ่มต้นจะเป็นค่าสูงสุดของข้อมูล ยกเว้นแผนภูมิแท่งที่มีค่าเริ่มต้นเป็นค่าสูงสุดของข้อมูล ระบบจะไม่สนใจแผนภูมินี้เมื่อตารางมีคอลัมน์ข้อมูลมากกว่า 1 คอลัมน์
นาที number ค่าของข้อมูล Mimimum ค่าต่ําสุดที่แสดงในสเกล ละเว้นสําหรับแผนภูมิวงกลม ค่าเริ่มต้นคือมูลค่าข้อมูลขั้นต่ํา ยกเว้นแผนภูมิแท่งซึ่งมีค่าเริ่มต้นเป็น 0 ระบบจะไม่สนใจแผนภูมินี้เมื่อตารางมีคอลัมน์ข้อมูลมากกว่า 1 คอลัมน์
แสดงป้ายกํากับหมวดหมู่ บูลีน จริง ป้ายกํากับควรปรากฏในแกนหมวดหมู่ (เช่น แถว) หรือไม่ ใช้ได้เฉพาะกับแผนภูมิเส้นและแผนภูมิแท่ง
แสดงป้ายกํากับค่า บูลีน จริง "จริง" จะแสดงป้ายกํากับบนแกนค่า ใช้ได้เฉพาะกับแผนภูมิเส้นและแผนภูมิแท่ง
คอลัมน์เดียว number ไม่มี แสดงผลเฉพาะคอลัมน์ข้อมูลที่ระบุ ตัวเลขนี้เป็นดัชนีที่อิงตาม 0 ในตาราง โดย 0 คือคอลัมน์ข้อมูลแรก สีที่กําหนดให้กับคอลัมน์เดียวจะเหมือนกับเมื่อมีการแสดงผลคอลัมน์ทั้งหมด ใช้กับแผนภูมิวงกลมหรือแผนที่ไม่ได้
title สตริง สตริงว่าง ชื่อแผนภูมิ หากไม่ได้ระบุ ระบบจะไม่แสดงชื่อ พารามิเตอร์แผนภูมิที่เทียบเท่าคือ chtt
ระยะเวลาป้ายกํากับ number อัตโนมัติ ช่วงที่จะแสดงป้ายกํากับแกนค่า เช่น หาก min เท่ากับ 0, max คือ 100 และ valueLabelsInterval เท่ากับ 20 แผนภูมิจะแสดงป้ายกํากับแกนที่ (0, 20, 40, 60, 80 100)
ความกว้าง number 400 ความกว้างของแผนภูมิเป็นพิกเซล หากอยู่ในช่วงที่ยอมรับหรือไม่มีช่วงที่ยอมรับ ระบบจะใช้ความกว้างขององค์ประกอบที่มี หากอยู่นอกช่วงที่ยอมรับได้ ระบบจะใช้ความกว้างเริ่มต้น

เมธอด

วิธีการ ประเภทการแสดงผล คำอธิบาย
draw(data, options) ไม่มี วาดแผนที่
getImageUrl() สตริง แสดงผล URL ของ Google Chart API ที่ใช้ขอแผนภูมิ โปรดทราบว่ายาวไม่เกิน 2,000 อักขระ ดูรายละเอียดเพิ่มเติมได้ที่ Google Chart API

เหตุการณ์

หากคุณตั้งค่าพร็อพเพอร์ตี้ enableEvents เป็น "จริง" แผนภูมิการสนับสนุนจะส่งเหตุการณ์สําหรับเหตุการณ์ที่แสดงในตารางด้านล่าง เหตุการณ์เหล่านี้ทั้งหมดแสดงผลออบเจ็กต์ event ที่มีพร็อพเพอร์ตี้ต่อไปนี้

  • type - สตริงที่แสดงถึงประเภทของเหตุการณ์
  • region - รหัสสําหรับภูมิภาคที่ได้รับผลกระทบ เพิ่มพารามิเตอร์ chof=json ลงในประเภทแผนภูมิดิบเพื่อดูรายการชื่อที่ใช้ได้ ดูรายละเอียดเพิ่มเติมได้ที่ chof=json
ชื่อ คำอธิบาย ประเภทค่า
error เริ่มทํางานเมื่อเกิดข้อผิดพลาดเมื่อพยายามแสดงผลแผนภูมิ รหัส, ข้อความ
onmouseover เริ่มทํางานเมื่อผู้ใช้วางเมาส์เหนือองค์ประกอบแผนภูมิ "เคอร์เซอร์เมาส์"
onmouseout เริ่มทํางานเมื่อผู้ใช้นําเมาส์ออกจากองค์ประกอบแผนภูมิ "เคอร์เซอร์เมาส์"
onclick เริ่มทํางานเมื่อผู้ใช้คลิกองค์ประกอบแผนภูมิ

"คลิก"

แผนภูมิใดรองรับเหตุการณ์ต่างๆ

แผนภูมิทั้งหมดที่รองรับพารามิเตอร์ chof=json รองรับเหตุการณ์การส่ง (กล่าวคือ แผนภูมิทั้งหมดยกเว้นแผนภูมิพิเศษ เช่น คิวอาร์โค้ด)

ตัวอย่างการจัดการเหตุการณ์

ต่อไปนี้คือตัวอย่างที่แสดงแถบที่บันทึกการคลิกของเมาส์

<!DOCTYPE html>
<html  xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html;  charset=utf-8"/>
    <title>
       Google Image Events Sample
    </title>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">
      google.charts.load('current', {packages: ['imagechart']});
    </script>
    <script type="text/javascript">
      function drawVisualization() {
        var dataTable = new google.visualization.DataTable();
        dataTable.addColumn('number');
        dataTable.addColumn('number');
        dataTable.addRows([
          [10,50],
          [50,60],
          [60,100],
          [80,40],
          [40,20]
        ]);

        var options = {cht:  'bvs', chs: '300x125',  colors:['#4D89F9','#C6D9FD'],
                       chds:'0,160', chxl:'0:|oranges|apples|pears|bananas|kiwis|', enableEvents:true};

        var chart = new  google.visualization.ImageChart(document.getElementById('visualization'));
        chart.draw(dataTable, options);

        // Assign  event  handler
        google.visualization.events.addListener(chart, 'onclick', mouseEventHandler);
      }

      google.charts.setOnLoadCallback(drawVisualization);

      // Define an event handler
      function mouseEventHandler(event)  {
        document.getElementById('debugger').innerHTML += "You clicked " + event.region + "<br/>";
      }

    </script>
  </head>
  <body style="font-family: Arial;border: 0 none;">
    <div id="visualization" style="width: 300px; height: 300px;"></div>
    <div id="debugger"></div>
  </body>
</html>

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

ระบบจะส่งข้อมูลไปยังบริการ Google Chart API

การแปล

การแสดงภาพนี้รองรับการแปลทุกรายการที่บริการ Google Chart รองรับ