แผนภูมิของปฏิทิน

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

ภาพรวม

หมายเหตุ: JavaScript จะนับเดือนโดยเริ่มจาก 0 เช่น มกราคมคือ 0, กุมภาพันธ์คือ 1 และธันวาคมคือ 11 ด้วยเหตุนี้ หากแผนภูมิปฏิทินดูเหมือนจะคลาดเคลื่อนใน 1 เดือน

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

แผนภูมิปฏิทินอาจอยู่ระหว่างการแก้ไขอย่างมากในการเปิดตัว Google แผนภูมิในอนาคต

แผนภูมิปฏิทินจะแสดงผลในเบราว์เซอร์โดยใช้ SVG หรือ VML แล้วแต่ว่าแบบใดจะเหมาะสมกับเบราว์เซอร์ของผู้ใช้ แผนภูมิปฏิทินจะแสดงเคล็ดลับเครื่องมือเมื่อผู้ใช้วางเมาส์เหนือข้อมูล เช่นเดียวกับแผนภูมิทั้งหมดของ Google และเครดิตที่ถึงกำหนด: แผนภูมิปฏิทินของเราได้รับแรงบันดาลใจมาจากการแสดงภาพปฏิทิน D3

ตัวอย่างง่ายๆ

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

วางเมาส์เหนือวันแต่ละวันเพื่อดูค่าของข้อมูลที่เกี่ยวข้อง

หากต้องการสร้างแผนภูมิปฏิทิน ให้โหลดแพ็กเกจ calendar แล้วสร้าง 2 คอลัมน์ โดยคอลัมน์หนึ่งสำหรับวันที่และอีกคอลัมน์หนึ่งสำหรับค่า (คอลัมน์ที่ 3 (ไม่บังคับสำหรับการจัดรูปแบบที่กำหนดเอง) จะพร้อมใช้งานใน 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:["calendar"]});
      google.charts.setOnLoadCallback(drawChart);

   function drawChart() {
       var dataTable = new google.visualization.DataTable();
       dataTable.addColumn({ type: 'date', id: 'Date' });
       dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
       dataTable.addRows([
          [ new Date(2012, 3, 13), 37032 ],
          [ new Date(2012, 3, 14), 38024 ],
          [ new Date(2012, 3, 15), 38024 ],
          [ new Date(2012, 3, 16), 38108 ],
          [ new Date(2012, 3, 17), 38229 ],
          // Many rows omitted for brevity.
          [ new Date(2013, 9, 4), 38177 ],
          [ new Date(2013, 9, 5), 38705 ],
          [ new Date(2013, 9, 12), 38210 ],
          [ new Date(2013, 9, 13), 38029 ],
          [ new Date(2013, 9, 19), 38823 ],
          [ new Date(2013, 9, 23), 38345 ],
          [ new Date(2013, 9, 24), 38436 ],
          [ new Date(2013, 9, 30), 38447 ]
        ]);

       var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));

       var options = {
         title: "Red Sox Attendance",
         height: 350,
       };

       chart.draw(dataTable, options);
   }
    </script>
  </head>
  <body>
    <div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
  </body>
</html>

วัน

สี่เหลี่ยมจัตุรัสแต่ละอันในแผนภูมิปฏิทินแสดงถึงวัน ขณะนี้ไม่สามารถปรับแต่งสีของเซลล์ข้อมูล แต่สีใน Google แผนภูมิรุ่นถัดไปจะมีการเปลี่ยนแปลง

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

รหัสของปฏิทินนี้คล้ายกับรหัสแรก ยกเว้นว่าแถวจะมีลักษณะดังนี้

          [ new Date(2013, 9, 4), 10 ],
          [ new Date(2013, 9, 5), 3 ],
          [ new Date(2013, 9, 7), -1 ],
          [ new Date(2013, 9, 8), 2 ],
          [ new Date(2013, 9, 12), -1 ],
          [ new Date(2013, 9, 13), 1 ],
          [ new Date(2013, 9, 15), 1 ],
          [ new Date(2013, 9, 16), -4 ],

คุณสามารถเปลี่ยนขนาดของวัน ("เซลล์") ได้ด้วยตัวเลือก calendar.cellSize ดังนี้

ในส่วนนี้ เราเปลี่ยน calendar.cellSize เป็น 10 ทำให้จำนวนวันน้อยลงจึงแสดงแผนภูมิโดยรวม 

       var options = {
         title: 'Red Sox Attendance',
         calendar: { cellSize: 10 },
       };

คุณปรับแต่งวันที่ไม่มีค่าข้อมูลได้โดยใช้ตัวเลือก noDataPattern ดังนี้

ในตัวอย่างนี้ เราตั้งค่า color เป็นสีน้ำเงินอ่อนและ backgroundColor ให้สีเข้มขึ้นเล็กน้อย 

       var options = {
         title: "Red Sox Attendance",
         height: 350,
         noDataPattern: {
           backgroundColor: '#76a7fa',
           color: '#a0c3ff'
         }
       };

คุณควบคุมสีเส้นขอบของเซลล์ ความกว้างเส้นขอบ และความทึบแสงของเซลล์ได้ด้วย calendar.cellColor ดังนี้

คุณจะต้องเลือกสีเส้นโครงร่างที่ต่างจาก monthOutlineColor หรือเลือกความทึบแสงต่ำด้วยความระมัดระวัง ตัวเลือกแผนภูมิด้านบนมีดังนี้ 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      cellColor: {
        stroke: '#76a7fa',
        strokeOpacity: 0.5,
        strokeWidth: 1,
      }
    }
  };

หากคุณโฟกัสที่วันใดวันหนึ่งในแผนภูมิด้านบน เส้นขอบจะไฮไลต์เป็นสีแดง คุณควบคุมลักษณะการทำงานดังกล่าวได้ด้วยตัวเลือก calendar.focusedCellColor ดังนี้ 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      focusedCellColor: {
        stroke: '#d3362d',
        strokeOpacity: 1,
        strokeWidth: 1,
      }
    }
  };

สัปดาห์

โดยค่าเริ่มต้น วันของสัปดาห์จะมีป้ายกำกับเป็นตัวอักษรตัวแรกตั้งแต่วันอาทิตย์ถึงวันเสาร์ คุณเปลี่ยนลำดับของวันไม่ได้ แต่เปลี่ยนตัวอักษรที่จะใช้ได้ด้วยตัวเลือก calendar.daysOfWeek นอกจากนี้ คุณยังควบคุมระยะห่างจากขอบระหว่างวันในสัปดาห์และแผนภูมิได้ด้วย calendar.dayOfWeekRightSpace และยังปรับแต่งรูปแบบข้อความได้ด้วย calendar.dayOfWeekLabel โดยทำดังนี้

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

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      dayOfWeekLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#1a8763',
        bold: true,
        italic: true,
      },
      dayOfWeekRightSpace: 10,
      daysOfWeek: 'DLMMJVS',
    }
  };

เดือน

โดยค่าเริ่มต้น ระบบจะระบุเดือนด้วยเส้นสีเทาเข้ม คุณใช้ตัวเลือก calendar.monthOutlineColor เพื่อควบคุมเส้นขอบ ใช้ calendar.monthLabel เพื่อปรับแต่งแบบอักษรของป้ายกำกับ และ calendar.underMonthSpace เพื่อปรับระยะห่างจากขอบของป้ายกำกับได้ ดังนี้

เราตั้งค่าแบบอักษรของป้ายกำกับเป็นตัวเอียงหนาแบบสีแดงเข้ม 12 พอยต์ไทม์-โรมัน กำหนดโครงร่างเป็นสีเดียวกัน และใส่ระยะห่างจากขอบ 16 พิกเซล ระบบจะตั้งค่าโครงร่างเดือนที่ไม่ได้ใช้เป็นสีที่จางลงของสีเดียวกัน 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      monthLabel: {
        fontName: 'Times-Roman',
        fontSize: 12,
        color: '#981b48',
        bold: true,
        italic: true
      },
      monthOutlineColor: {
        stroke: '#981b48',
        strokeOpacity: 0.8,
        strokeWidth: 2
      },
      unusedMonthOutlineColor: {
        stroke: '#bc5679',
        strokeOpacity: 0.8,
        strokeWidth: 1
      },
      underMonthSpace: 16,
    }
  };

ปี

ปีในแผนภูมิปฏิทินจะแสดงอยู่ที่ขอบด้านซ้ายของแผนภูมิเสมอ และจะปรับแต่งด้วย calendar.yearLabel และ calendar.underYearSpace ได้ดังนี้

เราตั้งค่าแบบอักษรปีเป็นสีเขียวเข้ม 32pt ตัวเอียงหนาแบบไทม์-โรมัน และเพิ่มพิกเซล 10 ระหว่าง ป้ายกำกับปีกับด้านล่างของแผนภูมิ ดังนี้ 

  var options = {
    title: 'Red Sox Attendance',
    height: 350,
    calendar: {
      underYearSpace: 10, // Bottom padding for the year labels.
      yearLabel: {
        fontName: 'Times-Roman',
        fontSize: 32,
        color: '#1A8763',
        bold: true,
        italic: true
      }
    }
  };

กำลังโหลด

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

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

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

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

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

แถว: แต่ละแถวในตารางแสดงวันที่

คอลัมน์:

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

ไม่มี

ไม่มี

 ...

 

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

ชื่อ
calendar.cellColor

ตัวเลือก calendar.cellColor ช่วยให้คุณปรับแต่งเส้นขอบของสี่เหลี่ยมจัตุรัสของวันตามปฏิทินได้ดังนี้ 

var options = {
  calendar: {
    cellColor: {
      stroke: 'red',      // Color the border of the squares.
      strokeOpacity: 0.5, // Make the borders half transparent.
      strokeWidth: 2      // ...and two pixels thick.
    }
  }
};
     
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: { stroke: '#fff', strokeOpacity: 1, strokeWidth: 1 }
calendar.cellSize

ขนาดของสี่เหลี่ยมจัตุรัสของวันตามปฏิทิน มีดังนี้

var options = { calendar: { cellSize: 10 } };
     
ประเภท: จำนวนเต็ม
ค่าเริ่มต้น: 16
calendar.dayOfWeekLabel

ควบคุมรูปแบบตัวอักษรของป้ายกำกับสัปดาห์ที่ด้านบนของแผนภูมิ ดังนี้

var options = {
  calendar: {
    dayOfWeekLabel: {
      fontName: 'Times-Roman',
      fontSize: 12,
      color: 'black',
      bold: false,
      italic: false
    }
  }
};
     
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.dayOfWeekRightSpace

ระยะห่างระหว่างขอบด้านขวาของป้ายกำกับสัปดาห์กับขอบด้านซ้ายของสี่เหลี่ยมจัตุรัสวันในแผนภูมิ

ประเภท: จำนวนเต็ม
ค่าเริ่มต้น: 4
calendar.daysOfWeek

ป้ายกำกับแบบตัวอักษรเดียวที่จะใช้สำหรับวันอาทิตย์ถึงวันเสาร์

ประเภท: สตริง
ค่าเริ่มต้น: 'SMTWTFS'
calendar.focusedCellColor

เมื่อผู้ใช้โฟกัส (เช่น วางเมาส์เหนือ) สี่เหลี่ยมจัตุรัสของวัน แผนภูมิปฏิทินจะไฮไลต์สี่เหลี่ยมจัตุรัส 

var options = {
  calendar:
    focusedCellColor: {
      stroke: 'red',
      strokeOpacity: 0.8,
      strokeWidth: 3
    }
  }
};
     
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: { stroke: '#000', strokeOpacity: 1, strokeWidth: 2 }
calendar.monthLabel

รูปแบบของป้ายกำกับเดือน เช่น

      var options = {
        calendar: {
          monthLabel: {
            fontName: 'Times-Roman',
            fontSize: 16,
            color: 'green',
            bold: true,
            italic: false
          }
        }
      };
     
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: { fontName: 'sans-serif', color: '#888', bold: false, italic: false }
calendar.monthOutlineColor

เดือนที่มีค่าข้อมูลได้รับการกำหนดขอบเขตเป็นเดือนอื่นๆ โดยใช้เส้นขอบในรูปแบบนี้

var options = {
  calendar: {
    monthOutlineColor: {
      stroke: 'blue',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
     
(โปรดดู calendar.unusedMonthOutlineColor ด้วย)
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: { stroke: '#000', strokeOpacity: 1, strokeWidth: 1 }
calendar.underMonthSpace

จำนวนพิกเซลระหว่างป้ายกำกับด้านล่างของเดือนกับจุดบนของวันเป็นสี่เหลี่ยมจัตุรัส 

var options = { calendar: { underMonthSpace: 12 } };
ประเภท: จำนวนเต็ม
ค่าเริ่มต้น: 6
calendar.underYearSpace

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

var options = { calendar: { underYearSpace: 2 } };
ประเภท: จำนวนเต็ม
ค่าเริ่มต้น: 0
calendar.unusedMonthOutlineColor

เดือนที่ไม่มีค่าข้อมูลจะมีการกำหนดขอบเขตเป็นเดือนอื่นๆ โดยใช้เส้นขอบในรูปแบบนี้ 

var options = {
  calendar: {
    unusedMonthOutlineColor: {
      stroke: 'yellow',
      strokeOpacity: 0.8,
      strokeWidth: 2
    }
  }
};
     
(โปรดดู calendar.monthOutlineColor ด้วย)
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: { stroke: '#c9c9c9', strokeOpacity: 1, strokeWidth: 1 }
colorAxis

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

 {minValue: 0,  colors: ['#FF0000', '#00FF00']}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
colorAxis.colors

สีที่จะกําหนดให้กับค่าในการแสดงภาพ อาร์เรย์ของสตริง โดยที่องค์ประกอบแต่ละรายการเป็นสตริงสี HTML เช่น colorAxis: {colors:['red','#004411']} คุณต้องมีค่าอย่างน้อย 2 ค่า การไล่ระดับสีจะรวมค่าทั้งหมด บวกค่ากลางที่คำนวณแล้ว โดยสีแรกเป็นค่าเล็กที่สุด และสีสุดท้ายเป็นค่าสูงสุด

ประเภท: อาร์เรย์ของสตริงสี
ค่าเริ่มต้น: null
colorAxis.maxValue

หากมี ให้ระบุค่าสูงสุดสำหรับข้อมูลสีแผนภูมิ ค่าข้อมูลสีของค่านี้และที่สูงกว่าจะแสดงเป็นสีสุดท้ายในช่วง colorAxis.colors

ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าสูงสุดของคอลัมน์สีในข้อมูลแผนภูมิ
colorAxis.minValue

หากมี ให้ระบุค่าขั้นต่ำสำหรับข้อมูลสีแผนภูมิ ค่าข้อมูลสีของค่านี้และค่าที่ต่ำกว่าจะแสดงผลเป็นสีแรกในช่วง colorAxis.colors

ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าขั้นต่ำของคอลัมน์สีในข้อมูลแผนภูมิ
colorAxis.values

หากมี ให้ควบคุมการเชื่อมโยงค่ากับสี แต่ละค่าจะเชื่อมโยงกับสีที่สอดคล้องกันในอาร์เรย์ colorAxis.colors ค่าเหล่านี้จะมีผลกับข้อมูลสีของแผนภูมิ การลงสีจะเป็นไปตามการไล่ระดับสีของค่าที่ระบุที่นี่ การไม่ระบุค่าสำหรับตัวเลือกนี้เทียบเท่ากับการระบุ [minValue, maxValue]

ประเภท: อาร์เรย์ของตัวเลข
ค่าเริ่มต้น: null
forceIFrame

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

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

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

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

แผนภูมิปฏิทินใช้เส้นทแยงมุมแบบลายทางเพื่อระบุว่าไม่มีข้อมูลของวันใดวันหนึ่ง ใช้ตัวเลือก noDataPattern.backgroundColor และ noDataPattern.color เพื่อลบล้างค่าเริ่มต้นโทนสีเทา เช่น 

noDataPattern: {
  backgroundColor: '#76a7fa',
  color: '#a0c3ff'
}
     
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: null
tooltip.isHtml

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

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

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

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

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

วิธีการ

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

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

ประเภทการคืนสินค้า: ไม่มี
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')

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

ประเภทผลลัพธ์: ออบเจ็กต์
getSelection()

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

ประเภทผลลัพธ์: อาร์เรย์ขององค์ประกอบการเลือก
setSelection()

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

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

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

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

กิจกรรม

ชื่อ
error

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

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

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

พร็อพเพอร์ตี้: แถว, วันที่
onmouseout

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

แถวที่พัก วันที่
ready

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

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

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

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

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

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