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

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

ภาพรวม

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

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

แผนภูมิปฏิทินอาจมีการแก้ไขจํานวนมากใน Google Charts รุ่นต่อๆ ไป

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

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

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

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

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

จากนั้นกรอกแถวที่มีค่า-วันที่ในแถวดังที่แสดงด้านล่าง

<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 Charts รุ่นถัดไป

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

โค้ดสําหรับปฏิทินนี้คล้ายกับรหัสแรก ยกเว้นแถวดังต่อไปนี้

          [ 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 เพื่อปรับระยะห่างจากขอบของป้ายกํากับได้

เราตั้งค่าแบบอักษรของป้ายกํากับเป็นตัวเอียงตัวหนา 12pt สีแดงเข้ม ตั้งค่าโครงร่างเป็นสีเดียวกัน และวางในระยะห่างจากขอบ 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 (ไม่บังคับ)
จุดประสงค์ในการใช้: วันที่ ค่า ... บทบาทที่ไม่บังคับ
ประเภทข้อมูล: วันที่ วันที่และเวลา หรือช่วงเวลาของวัน number ...
บทบาท: โดเมน ข้อมูล ...
บทบาทคอลัมน์ที่ไม่บังคับ:

ไม่มี

ไม่มี

 ...

 

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

ชื่อ
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.highlightCellColor

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

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

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

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 }
แกนสี

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

 {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.backgroundColor และ noDataPattern.color เพื่อลบล้างค่าเริ่มต้นโทนสีเทา เช่น 

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

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

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

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

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

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

เมธอด

วิธีการ
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()

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

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

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

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

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

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

เหตุการณ์

ชื่อ
error

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

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

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

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

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

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

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

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

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

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

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

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