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

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

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

ภาพรวม

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

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

ระบบจะส่งพารามิเตอร์ของ URL ของ Chart API อื่นๆ ทั้งหมด (ยกเว้น 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 คือ "imagechart"

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ชื่อ ประเภท ค่าเริ่มต้น คำอธิบาย
annotationColumns Array<object> ไม่มี

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

ออบเจ็กต์แต่ละรายการในอาร์เรย์มีคุณสมบัติต่อไปนี้

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

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

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

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

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

วิธีการ

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

กิจกรรม

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

  • type - สตริงที่แสดงประเภทของเหตุการณ์
  • region - รหัสของภูมิภาคที่ได้รับผลกระทบ เพิ่มพารามิเตอร์ chof=json ลงในประเภทแผนภูมิดิบเพื่อดูรายการชื่อที่ใช้ได้ ดูรายละเอียดเพิ่มเติมได้ที่ chof=json
ชื่อ คำอธิบาย type Value
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