แผนภูมิเส้น

ภาพรวม

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

ตัวอย่าง

การต่อแถว

คุณสามารถสร้างความต่อเนื่องให้กับเส้นได้โดยตั้งค่าตัวเลือก curveType เป็น function

โค้ดสําหรับสร้างแผนภูมินี้แสดงอยู่ด้านล่าง ข้อควรทราบในการใช้ตัวเลือก curveType: function 

  <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([
          ['Year', 'Sales', 'Expenses'],
          ['2004',  1000,      400],
          ['2005',  1170,      460],
          ['2006',  660,       1120],
          ['2007',  1030,      540]
        ]);

        var options = {
          title: 'Company Performance',
          curveType: 'function',
          legend: { position: 'bottom' }
        };

        var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));

        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="curve_chart" style="width: 900px; height: 500px"></div>
  </body>
</html>

การสร้างแผนภูมิเส้น Material

ในปี 2014 Google ได้ประกาศหลักเกณฑ์ที่มีเจตนาที่จะสนับสนุนรูปลักษณ์ทั่วไปในพร็อพเพอร์ตี้และแอป (เช่น แอป Android) ที่ทํางานบนแพลตฟอร์มของ Google เราเรียกการดําเนินการนี้ว่า Material Design เราจะให้บริการแผนภูมิ "หลัก" ของแผนภูมิหลักทั้งหมดของเรา คุณสามารถใช้รูปแบบต่างๆ ได้หากต้องการ

การสร้างแผนภูมิเส้น Material คล้ายกับการสร้างสิ่งที่เราเรียกว่า แผนภูมิเส้น "คลาสสิก" คุณโหลด GoogleVisual API (แต่มีแพ็กเกจ 'line' แทนแพ็กเกจ 'corechart') กําหนดตารางข้อมูล แล้วสร้างออบเจ็กต์ (แต่คลาส google.charts.Line แทนที่จะเป็น google.visualization.LineChart)

หมายเหตุ: แผนภูมิเนื้อหาจะใช้งานไม่ได้ใน Internet Explorer เวอร์ชันเก่า (IE8 และเวอร์ชันก่อนหน้าไม่รองรับ SVG ซึ่งแผนภูมิเนื้อหาต้องใช้)

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

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

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }

แผนภูมิ Material อยู่ในเบต้า ลักษณะที่ปรากฏและการโต้ตอบส่วนใหญ่ถือเป็นที่สิ้นสุด แต่ตัวเลือกต่างๆ ที่มีในแผนภูมิแบบคลาสสิกยังไม่มีให้บริการ คุณดูรายการตัวเลือกที่ระบบยังไม่รองรับในปัญหานี้ได้

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

chart.draw(data, options);

...ด้วยรูปแบบต่อไปนี้

chart.draw(data, google.charts.Line.convertOptions(options));

แผนภูมิ Y แบบ Y

บางครั้งคุณอาจต้องการแสดง 2 ชุดในแผนภูมิเส้นซึ่งมีแกน Y อิสระ 2 แกน ได้แก่ แกนซ้ายสําหรับชุดหนึ่ง และแกนที่เหมาะสมสําหรับอีกชุด ได้แก่

โปรดทราบว่าไม่เพียงแต่แกน Y 2 แกนของเราซึ่งติดป้ายกํากับต่างกัน ("อุณหภูมิ" กับ "แสงแดด") แต่แต่ละขนาดมีสเกลและเส้นตารางอิสระของตัวเอง หากต้องการปรับแต่งลักษณะการทํางานนี้ ให้ใช้ตัวเลือก vAxis.gridlines และ vAxis.viewWindow

ในโค้ด Material ด้านล่าง ตัวเลือก axes และ series ร่วมกันจะระบุลักษณะที่ปรากฏของรูป Y ของแผนภูมิ ตัวเลือก series จะระบุแกนที่จะใช้สําหรับแต่ละ ('Temps' และ 'Daylight' โดยไม่จําเป็นต้องเกี่ยวข้องกับชื่อคอลัมน์ในตารางข้อมูล) ตัวเลือก axes จะทําให้แผนภูมินี้เป็นแผนภูมิคู่ Y ที่วางแกน 'Temps' ทางด้านซ้าย และแกน 'Daylight' ทางด้านขวา

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

วัสดุ
      var materialOptions = {
        chart: {
          title: 'Average Temperatures and Daylight in Iceland Throughout the Year'
        },
        width: 900,
        height: 500,
        series: {
          // Gives each series an axis name that matches the Y-axis below.
          0: {axis: 'Temps'},
          1: {axis: 'Daylight'}
        },
        axes: {
          // Adds labels to each axis; they don't have to match the axis names.
          y: {
            Temps: {label: 'Temps (Celsius)'},
            Daylight: {label: 'Daylight'}
          }
        }
      };
คลาสสิก
      var classicOptions = {
        title: 'Average Temperatures and Daylight in Iceland Throughout the Year',
        width: 900,
        height: 500,
        // Gives each series an axis that matches the vAxes number below.
        series: {
          0: {targetAxisIndex: 0},
          1: {targetAxisIndex: 1}
        },
        vAxes: {
          // Adds titles to each axis.
          0: {title: 'Temps (Celsius)'},
          1: {title: 'Daylight'}
        },
        hAxis: {
          ticks: [new Date(2014, 0), new Date(2014, 1), new Date(2014, 2), new Date(2014, 3),
                  new Date(2014, 4),  new Date(2014, 5), new Date(2014, 6), new Date(2014, 7),
                  new Date(2014, 8), new Date(2014, 9), new Date(2014, 10), new Date(2014, 11)
                 ]
        },
        vAxis: {
          viewWindow: {
            max: 30
          }
        }
      };

อันดับสูงสุด X

หมายเหตุ: แกน X ยอดนิยมใช้ได้เฉพาะกับแผนภูมิเนื้อหา (เช่น ที่มีแพ็กเกจ line)

หากต้องการเพิ่มป้ายกํากับและชื่อในแกน X ไว้ที่ด้านบนสุดของแผนภูมิ ไม่ใช่ด้านล่างสุด คุณก็ทําใน "แผนภูมิเนื้อหา" ได้ด้วยตัวเลือก axes.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':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'Day');
      data.addColumn('number', 'Guardians of the Galaxy');
      data.addColumn('number', 'The Avengers');
      data.addColumn('number', 'Transformers: Age of Extinction');

      data.addRows([
        [1,  37.8, 80.8, 41.8],
        [2,  30.9, 69.5, 32.4],
        [3,  25.4,   57, 25.7],
        [4,  11.7, 18.8, 10.5],
        [5,  11.9, 17.6, 10.4],
        [6,   8.8, 13.6,  7.7],
        [7,   7.6, 12.3,  9.6],
        [8,  12.3, 29.2, 10.6],
        [9,  16.9, 42.9, 14.8],
        [10, 12.8, 30.9, 11.6],
        [11,  5.3,  7.9,  4.7],
        [12,  6.6,  8.4,  5.2],
        [13,  4.8,  6.3,  3.6],
        [14,  4.2,  6.2,  3.4]
      ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 900,
        height: 500,
        axes: {
          x: {
            0: {side: 'top'}
          }
        }
      };

      var chart = new google.charts.Line(document.getElementById('line_top_x'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  </script>
</head>
<body>
  <div id="line_top_x"></div>
</body>
</html>

กําลังโหลด

ชื่อแพ็กเกจ google.charts.load คือ "corechart" และชื่อแพ็กเกจของการแสดงภาพคือ google.visualization.LineChart 

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

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

สําหรับแผนภูมิเส้น Material ชื่อแพ็กเกจของ google.charts.load คือ "line" และชื่อของคลาสการแสดงภาพคือ google.charts.Line 

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

  var visualization = new google.charts.Line(container);

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

แถว: แต่ละแถวในตารางแสดงชุดจุดข้อมูลที่มีตําแหน่งแกน X เดียวกัน

คอลัมน์

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

 

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

ชื่อ
เป้าหมายการรวม
วิธีการรวมข้อมูลประเภทต่างๆ ลงในเคล็ดลับเครื่องมือ
  • 'category': จัดกลุ่มข้อมูลที่เลือกตาม x-value
  • 'series': จัดกลุ่มข้อมูลที่เลือกตามชุดหนังสือ
  • 'auto': จัดกลุ่มข้อมูลที่เลือกตาม x-value หากการเลือกทั้งหมดมีค่า x-value เหมือนกันและตามชุดรายการ
  • 'none': แสดงเคล็ดลับเครื่องมือเพียงรายการเดียวต่อการเลือก
โดยปกติแล้วจะใช้ aggregationTarget ร่วมกับ selectionMode และ tooltip.trigger เช่น 
var options = {
  // Allow multiple
  // simultaneous selections.
  selectionMode: 'multiple',
  // Trigger tooltips
  // on selections.
  tooltip: {trigger: 'selection'},
  // Group selections
  // by x-value.
  aggregationTarget: 'category',
};
ประเภท: สตริง
ค่าเริ่มต้น: "อัตโนมัติ"
ภาพเคลื่อนไหว.ระยะเวลา

ระยะเวลาของภาพเคลื่อนไหวเป็นมิลลิวินาที ดูรายละเอียดได้ที่เอกสารประกอบเกี่ยวกับภาพเคลื่อนไหว

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
ภาพเคลื่อนไหว.startup

กําหนดว่าแผนภูมิจะแสดงภาพเคลื่อนไหวของการวาดครั้งแรกหรือไม่ หาก true แผนภูมิจะเริ่มต้นที่เส้นฐานและเคลื่อนไหวเป็นสถานะสุดท้าย

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

ฟังก์ชันการค่อยๆ เปลี่ยนที่ใช้กับภาพเคลื่อนไหว โดยมีตัวเลือกดังต่อไปนี้

  • 'เชิงเส้น' - ความเร็วคงที่
  • 'in' - ค่อยๆ เข้า - เริ่มช้าและเร็วขึ้น
  • 'out' - ค่อยๆ ออก - เริ่มต้นอย่างรวดเร็วและช้าลง
  • 'inAndOut' - เข้าออกง่าย - เริ่มต้นช้า เพิ่มความเร็ว จากนั้นช้าลง
ประเภท: สตริง
ค่าเริ่มต้น: "เชิงเส้น"
ข้อมูลรูปแบบคําอธิบายประกอบ

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

var options = {
  annotations: {
    boxStyle: {
      // Color of the box outline.
      stroke: '#888',
      // Thickness of the box outline.
      strokeWidth: 1,
      // x-radius of the corner curvature.
      rx: 10,
      // y-radius of the corner curvature.
      ry: 10,
      // Attributes for linear gradient fill.
      gradient: {
        // Start color for gradient.
        color1: '#fbf6a7',
        // Finish color for gradient.
        color2: '#33b679',
        // Where on the boundary to start and
        // end the color1/color2 gradient,
        // relative to the upper left corner
        // of the boundary.
        x1: '0%', y1: '0%',
        x2: '100%', y2: '100%',
        // If true, the boundary for x1,
        // y1, x2, and y2 is the box. If
        // false, it's the entire chart.
        useObjectBoundingBoxUnits: true
      }
    }
  }
};

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

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
คําอธิบายประกอบ datum
สําหรับแผนภูมิที่รองรับหมายเหตุ ออบเจ็กต์ annotations.datum ช่วยให้คุณลบล้างตัวเลือกของ Google Charts สําหรับคําอธิบายประกอบที่ให้ไว้สําหรับองค์ประกอบข้อมูลแต่ละรายการได้ (เช่น ค่าที่แสดงกับแท่งแต่ละแท่งในแผนภูมิแท่ง) คุณสามารถควบคุมสีด้วย annotations.datum.stem.color ความยาวก้านจับที่มี annotations.datum.stem.length และรูปแบบด้วย annotations.datum.style
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: สีคือ "สีดํา" ความยาวคือ 12 รูปแบบคือ "จุด"
คําอธิบายประกอบ.โดเมน
สําหรับแผนภูมิที่รองรับหมายเหตุ ออบเจ็กต์ annotations.domain จะช่วยให้คุณลบล้างตัวเลือกของ Google Charts สําหรับคําอธิบายประกอบที่ระบุให้โดเมนได้ (แกนหลักของแผนภูมิ เช่น แกน X ในแผนภูมิเส้นทั่วไป) คุณสามารถควบคุมสีด้วย annotations.domain.stem.color ความยาวก้านจับที่มี annotations.domain.stem.length และรูปแบบด้วย annotations.domain.style
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: สีคือ "สีดํา" ความยาวคือ 5 รูปแบบคือ "จุด"
คําอธิบายประกอบ.contrast
สําหรับแผนภูมิที่รองรับคําอธิบายประกอบ บูลีน annotations.highContrast จะช่วยให้คุณลบล้างสีของคําอธิบายประกอบที่ Google แผนภูมิเลือกได้ โดยค่าเริ่มต้น annotations.highContrast จะเป็นจริง ซึ่งทําให้แผนภูมิเลือกสีคําอธิบายประกอบที่มีคอนทราสต์ที่ดี ได้แก่ สีอ่อนบนพื้นหลังสีเข้มและสีเข้มบนแสง หากตั้งค่า annotations.highContrast เป็น "เท็จ" และไม่ระบุสีของคําอธิบายประกอบของคุณเอง Google Charts จะใช้สีชุดเริ่มต้นของคําอธิบายประกอบ
ประเภท: บูลีน
ค่าเริ่มต้น: จริง
คําอธิบายประกอบ.stem
สําหรับแผนภูมิที่รองรับคําอธิบายประกอบ ออบเจ็กต์ annotations.stem ช่วยให้คุณลบล้างตัวเลือกของ Google Charts สําหรับรูปแบบก้านย่อยได้ คุณสามารถควบคุมสีด้วย annotations.stem.color และความยาวก้ามปูด้วย annotations.stem.length โปรดทราบว่าตัวเลือกความยาวของต้นทางไม่มีผลต่อคําอธิบายประกอบที่มีรูปแบบ 'line': สําหรับคําอธิบายประกอบdtum ของ 'line' ความยาวต้นทางจะเท่ากันกับข้อความเสมอ และสําหรับคําอธิบายประกอบโดเมน 'line' ก้านของส่วนขยายจะขยาย ทั่วทั้งแผนภูมิ
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: สีเป็น "สีดํา" ความยาวคือ 5 รายการสําหรับคําอธิบายประกอบโดเมน และ 12 สําหรับคําอธิบายประกอบข้อมูล
คําอธิบายประกอบ
สําหรับแผนภูมิที่รองรับหมายเหตุ ตัวเลือก annotations.style จะช่วยให้คุณลบล้างตัวเลือกประเภทคําอธิบายประกอบใน Google Charts ได้ ซึ่งอาจเป็น 'line' หรือ 'point' ก็ได้
ประเภท: สตริง
ค่าเริ่มต้น: 'point'
คําอธิบายประกอบข้อความรูปแบบ
สําหรับแผนภูมิที่รองรับหมายเหตุ ออบเจ็กต์ annotations.textStyle จะควบคุมลักษณะที่ปรากฏของคําอธิบายประกอบ 
var options = {
  annotations: {
    textStyle: {
      fontName: 'Times-Roman',
      fontSize: 18,
      bold: true,
      italic: true,
      // The color of the text.
      color: '#871b47',
      // The color of the text outline.
      auraColor: '#d799ae',
      // The transparency of the text.
      opacity: 0.8
    }
  }
};

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

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
แกนชื่อตําแหน่ง

ตําแหน่งการวางชื่อแกน เทียบกับพื้นที่แผนภูมิ ค่าที่รองรับมีดังต่อไปนี้

  • - วาดชื่อแกนภายในพื้นที่แผนภูมิ
  • ออก - ดึงชื่อแกนนอกพื้นที่แผนภูมิ
  • ไม่มี - ละเว้นชื่อแกน
ประเภท: สตริง
ค่าเริ่มต้น: "ออก"
สีพื้นหลัง

สีพื้นหลังของพื้นที่หลักของแผนภูมิ อาจเป็นสตริงสี 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']

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

ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ hhairair สําหรับแผนภูมิ

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
ครอสแฮร์สี

สีของเครื่องหมายกากบาท แสดงเป็นชื่อสี (เช่น "สีน้ําเงิน") หรือค่า RGB (เช่น "#adf")

ประเภท: สตริง
ประเภท: ค่าเริ่มต้น
Crosshair.highlight

ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ครอสเฮิร์ตเมื่อโฟกัส
เช่น crosshair: { focused: { color: '#3bc', opacity: 0.8 } }

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: ค่าเริ่มต้น
Crosshair.opacity

ความทึบแสงของ Crosshair โดย 0.0 มีความโปร่งใสโดยสมบูรณ์และ 1.0 ทึบแสงอย่างสมบูรณ์

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.0
Crosshair.orientation

การวางแนวผมแบบแนวนอน สามารถเป็น "แนวตั้ง" สําหรับผมตรงเท่านั้น "แนวนอน" สําหรับผมแนวนอนเท่านั้น หรือ "ทั้ง 2 แบบ" สําหรับผมกากบาทแบบดั้งเดิม

ประเภท: สตริง
ค่าเริ่มต้น: 'ทั้ง'
Crosshair.selected

ออบเจ็กต์ที่มีพร็อพเพอร์ตี้ Crosshair ที่เลือก
ตัวอย่างเช่น crosshair: { selected: { color: '#3bc', opacity: 0.8 } }

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: ค่าเริ่มต้น
ทริกเกอร์ข้าม

เวลาที่ควรจะแสดงเครื่องหมายกากบาท: ใน 'focus', 'selection' หรือ 'both'

ประเภท: สตริง
ค่าเริ่มต้น: 'ทั้ง'
เส้นโค้ง

ควบคุมเส้นโค้งของเส้นเมื่อความกว้างของเส้นไม่ใช่ 0 อาจมีสถานะใดสถานะหนึ่งต่อไปนี้

  • "none" - เส้นตรงโดยไม่มีเส้นโค้ง
  • 'function' - มุมของเส้นจะเรียบขึ้น
ประเภท:สตริง
ค่าเริ่มต้น: "ไม่มี"
ความทึบข้อมูล

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

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

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

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

ตัวเลือก explorer ช่วยให้ผู้ใช้เลื่อนและซูมแผนภูมิใน Google ได้ explorer: {} มีรูปแบบเริ่มต้นของนักสํารวจ ซึ่งช่วยให้ผู้ใช้เลื่อนในแนวนอนและแนวตั้งได้โดยการลาก ตลอดจนซูมเข้าและออกด้วยการเลื่อน

ฟีเจอร์นี้เป็นแบบทดลองและอาจมีการเปลี่ยนแปลงในรุ่นในอนาคต

หมายเหตุ: เครื่องมือสํารวจจะใช้งานได้กับแกนอย่างต่อเนื่อง (เช่น ตัวเลขหรือวันที่)

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
เครื่องมือสํารวจ

เครื่องมือสํารวจ Google Charts รองรับการดําเนินการ 3 รายการต่อไปนี้

  • dragToPan: ลากเพื่อย้ายไปรอบๆ แผนภูมิในแนวนอนและแนวตั้ง หากต้องการแพนตามแกนแนวนอนเท่านั้น ให้ใช้ explorer: { axis: 'horizontal' } ในทํานองเดียวกันกับแกนตั้ง
  • dragToZoom: ลักษณะการทํางานเริ่มต้นของนักสํารวจคือซูมเข้าและออกเมื่อผู้ใช้เลื่อน หากมีการใช้ explorer: { actions: ['dragToZoom', 'rightClickToReset'] } ให้ลากผ่านพื้นที่สี่เหลี่ยมผืนผ้าเพื่อซูมเข้าพื้นที่นั้น เราขอแนะนําให้ใช้ rightClickToReset ทุกครั้งที่ใช้ dragToZoom ดูการปรับแต่งการซูมได้ใน explorer.maxZoomIn, explorer.maxZoomOut และ explorer.zoomDelta
  • rightClickToReset: การคลิกขวาที่แผนภูมิจะเป็นการกลับไปใช้ระดับการเลื่อนเริ่มต้นและการซูม
ประเภท: อาร์เรย์ของสตริง
ค่าเริ่มต้น: ['dragToPan', 'rightClickToReset']
เครื่องมือสํารวจ

โดยค่าเริ่มต้น ผู้ใช้จะเลื่อนได้ทั้งในแนวนอนและแนวตั้งเมื่อใช้ตัวเลือก explorer หากต้องการให้ผู้ใช้เลื่อนในแนวนอนเท่านั้น ให้ใช้ explorer: { axis: 'horizontal' } ในทํานองเดียวกัน explorer: { axis: 'vertical' } เปิดใช้การเลื่อนแนวตั้งเท่านั้น

ประเภท: สตริง
ค่าเริ่มต้น: การแพนทั้งในแนวนอนและแนวตั้ง
explorer.keepInBounds

โดยค่าเริ่มต้น ผู้ใช้จะเลื่อนไปยังส่วนต่างๆ ได้โดยไม่คํานึงถึงข้อมูล ไม่ว่าจะอยู่ที่ใด ระบบจะไม่ใช้ explorer: { keepInBounds: true } เพื่อให้แน่ใจว่าผู้ใช้จะเลื่อนจากแผนภูมิเดิมได้

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

ความยาวสูงสุดที่นักสํารวจสามารถซูมเข้าได้ โดยค่าเริ่มต้น ผู้ใช้จะซูมเข้าได้มากพอที่จะเห็นมุมมองต้นฉบับเพียง 25% การตั้งค่า explorer: { maxZoomIn: .5 } จะอนุญาตให้ผู้ใช้ซูมเข้าได้ไกลเกินกว่าที่จะดู ครึ่งหนึ่งของมุมมองเดิมได้

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0.25
explorer.maxZoomOut

ค่าสูงสุดที่นักสํารวจสามารถซูมออก โดยค่าเริ่มต้นแล้ว ผู้ใช้จะสามารถซูมออกจนเพียงพอที่แผนภูมิจะใช้เฉพาะพื้นที่ 1/4 ของพื้นที่ว่าง การตั้งค่า explorer: { maxZoomOut: 8 } จะอนุญาตให้ผู้ใช้ซูมออกไปได้ไกลพอที่จะทําให้แผนภูมิใช้พื้นที่เพียง 1/8 ของพื้นที่ว่าง

ประเภท: ตัวเลข
ค่าเริ่มต้น: 4
explorer.zoomDelta

เมื่อผู้ใช้ซูมเข้าหรือออก explorer.zoomDelta จะกําหนดระดับการซูม ยิ่งตัวเลขน้อย การซูมจะราบรื่นและช้าลง

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.5
โฟกัสเป้าหมาย

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

  • "datum" - มุ่งเน้นที่จุดข้อมูลเดียว สัมพันธ์กับเซลล์ในตารางข้อมูล
  • "category" - มุ่งเน้นการจัดกลุ่มจุดข้อมูลทั้งหมดตามแกนหลัก สัมพันธ์กับแถวในตารางข้อมูล

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

ประเภท: สตริง
ค่าเริ่มต้น: 'datum'
ขนาดแบบอักษร

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

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

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

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

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

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

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

{
  title: 'Hello',
  titleTextStyle: {
    color: '#FF0000'
  }
}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
hAxis.baseline

เส้นฐานสําหรับแกนนอน

ตัวเลือกนี้รองรับเฉพาะแกน continuous

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
สีฐาน hAxis.baseline

สีของเส้นฐานสําหรับแกนแนวนอน อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00'

ตัวเลือกนี้รองรับเฉพาะแกน continuous

ประเภท: ตัวเลข
ค่าเริ่มต้น: "ดํา"
hAxis.direction

ทิศทางที่ค่าในแกนนอนเติบโตขึ้น ระบุ -1 เพื่อกลับลําดับค่า

ประเภท: 1 หรือ -1
ค่าเริ่มต้น: 1
รูปแบบ hAxis

สตริงรูปแบบสําหรับป้ายกํากับของแกนตัวเลขหรือวันที่

สําหรับป้ายกํากับแกนตัวเลข นี่คือชุดย่อยของรูปแบบ ICU ที่ตั้งค่า เช่น {format:'#,###%'} จะแสดงค่า "1,000%", "750%" และ "50%" สําหรับค่า 10, 7.5 และ 0.5 คุณยังให้ข้อมูลต่อไปนี้ได้ด้วย

  • {format: 'none'}: แสดงตัวเลขที่ไม่มีการจัดรูปแบบ (เช่น 8000000)
  • {format: 'decimal'}: แสดงตัวเลขที่มีตัวคั่นหลักพัน (เช่น 8,000,000)
  • {format: 'scientific'}: แสดงตัวเลขในรูปแบบวิทยาศาสตร์ (เช่น 8e6)
  • {format: 'currency'}: แสดงหมายเลขโทรศัพท์ในสกุลเงินท้องถิ่น (เช่น 240,000.00 บาท)
  • {format: 'percent'}: แสดงตัวเลขเป็นเปอร์เซ็นต์ (เช่น 800,000,000%)
  • {format: 'short'}: แสดงตัวเลขย่อ (เช่น 8 ล้าน)
  • {format: 'long'}: แสดงตัวเลขเป็นคําเต็ม (เช่น 8 ล้าน)

สําหรับป้ายกํากับแกนวันที่ ข้อมูลนี้เป็นกลุ่มย่อยของการจัดรูปแบบวันที่ ชุดรูปแบบ ICU เช่น {format:'MMM d, y'} จะแสดงค่า "1 ก.ค. 2011" สําหรับเดือนกรกฎาคมครั้งแรกในปี 2011

การจัดรูปแบบจริงที่ใช้กับป้ายกํากับมาจากภาษาที่โหลด API ดูรายละเอียดเพิ่มเติมได้ที่การโหลดแผนภูมิที่มีภาษาเฉพาะ

ในการคํานวณค่าเครื่องหมายถูกและตารางกริด ตัวเลือกชุดค่าผสมหลายรายการของตัวเลือกตารางกริดที่เกี่ยวข้องทั้งหมดจะได้รับการพิจารณา และจะแสดงค่าสํารองหากป้ายกํากับเครื่องหมายถูกที่ซ้ําจะซ้ํากันหรือทับซ้อนกัน ดังนั้น คุณสามารถระบุ format:"#" หากต้องการแสดงเฉพาะค่าเครื่องหมายถูกที่เป็นจํานวนเต็ม แต่โปรดทราบว่าหากไม่มีตัวเลือกที่เป็นไปตามเงื่อนไขนี้ ก็จะไม่มีการแสดงตารางกริดหรือเครื่องหมายถูก

ตัวเลือกนี้ใช้ได้กับแกน continuous เท่านั้น

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

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

{color: '#333', minSpacing: 20}

ตัวเลือกนี้ใช้ได้กับแกน continuous เท่านั้น

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
hAxis.gridlines.color

สีของเส้นตารางแนวนอนภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง

ประเภท: สตริง
ค่าเริ่มต้น: "#CCC"
hAxis.gridlines.count

จํานวนเส้นตารางแนวนอนโดยประมาณในพื้นที่แผนภูมิ หากคุณระบุจํานวนบวกสําหรับ gridlines.count ระบบจะใช้ค่าดังกล่าวในการคํานวณ minSpacing ระหว่างตารางกริด คุณระบุค่า 1 เพื่อวาดตารางกริดได้เพียงรายการเดียว หรือ 0 เพื่อวาดไม่มีเส้นตารางกริด ระบุ -1 ซึ่งเป็นค่าเริ่มต้น เพื่อคํานวณจํานวนตารางกริดโดยอัตโนมัติตามตัวเลือกอื่นๆ

ประเภท: ตัวเลข
ค่าเริ่มต้น: -1
hAxis.gridlines.interval

อาร์เรย์ของขนาด (เป็นค่าข้อมูล ไม่ใช่พิกเซล) ระหว่างเส้นตารางกริดที่อยู่ติดกัน ตัวเลือกนี้มีไว้สําหรับแกนตัวเลขเท่านั้นในขณะนี้ แต่เทียบเท่ากับตัวเลือก gridlines.units.<unit>.interval ซึ่งใช้สําหรับวันที่และเวลาเท่านั้น สําหรับสเกลเชิงเส้น ค่าเริ่มต้นคือ [1, 2, 2.5, 5] ซึ่งหมายความว่าค่าตารางกริดจะอยู่ในทุกหน่วย (1) ในหน่วยเลขคู่ (2) หรือคูณ 2.5 หรือ 5 ก็ได้ กําลังพิจารณาค่า 10 คูณค่าเหล่านี้ (เช่น [10, 20, 25, 50] และ [.1, .2, .25, .5]) สําหรับสเกลบันทึก ค่าเริ่มต้นคือ [1, 2, 5]

ประเภท: จํานวนระหว่าง 1 ถึง 10 แต่ไม่รวม 10
ค่าเริ่มต้น: ประมวลผลแล้ว
hAxis.gridlines.minSpacing

พื้นที่หน้าจอขั้นต่ําเป็นพิกเซลระหว่างตารางกริดหลัก hAxis ค่าเริ่มต้นสําหรับเส้นตารางหลักคือ 40 สําหรับสเกลเชิงเส้น และ 20 สําหรับสเกลบันทึก หากคุณระบุ count ไม่ใช่ minSpacing ระบบจะคํานวณ minSpacing จากจํานวน ในทางกลับกัน หากคุณระบุ minSpacing ไม่ใช่ count ระบบจะคํานวณจํานวนจาก minSpacing หากคุณระบุทั้ง 2 รูปแบบ minSpacing จะลบล้างค่านั้น

ประเภท: ตัวเลข
ค่าเริ่มต้น: ประมวลผลแล้ว
hAxis.gridlines.multi

ค่าตารางกริดและเครื่องหมายถูกทั้งหมดต้องเป็นหลายค่าของตัวเลือกนี้ โปรดทราบว่าจะไม่นับ 10 คูณกับกําลังของค่าหลายครั้ง ซึ่งต่างจากช่วงเวลา คุณสามารถบังคับให้เห็บเป็นจํานวนเต็มได้โดยระบุ gridlines.multiple = 1 หรือบังคับให้เห็บคูณด้วย 1,000 โดยระบุ gridlines.multiple = 1000

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
hAxis.gridlines.units

ลบล้างรูปแบบเริ่มต้นสําหรับแง่มุมต่างๆ ของข้อมูลประเภทวันที่/วันที่และเวลา/ช่วงเวลาของวัน เมื่อใช้ร่วมกับตารางกริดที่คํานวณโดยแผนภูมิ อนุญาตการจัดรูปแบบปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที

รูปแบบทั่วไปคือ

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
hAxis.minorGridlines

ออบเจ็กต์ที่มีสมาชิกในการกําหนดค่าตารางกริดย่อยบนแกนแนวนอน ซึ่งคล้ายกับตัวเลือก hAxis.gridlines

ตัวเลือกนี้ใช้ได้กับแกน continuous เท่านั้น

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
hAxis.minorGridlines.color

สีของตารางกริดย่อยแนวนอนภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง

ประเภท: สตริง
ค่าเริ่มต้น: ชุดค่าผสมของเส้นตารางและสีพื้นหลัง
hAxis.minorGridlines.count

ตัวเลือก minorGridlines.count ส่วนใหญ่เลิกใช้งานแล้ว ยกเว้นการปิดใช้ตารางกริดเล็กน้อยโดยตั้งค่าการนับเป็น 0 ตอนนี้จํานวนตารางกริดย่อยจะขึ้นอยู่กับช่วงของตารางกริดหลักทั้งหมด (ดู hAxis.gridlines.interval) และพื้นที่ขั้นต่ําที่จําเป็น (ดู hAxis.minorGridlines.minSpacing)

ประเภท: ตัวเลข
ค่าเริ่มต้น:1
hAxis.minorGridlines.interval

ตัวเลือก BigQueryGridlines.interval เหมือนกับตัวเลือกช่วงตารางกริดหลัก แต่ช่วงที่เลือกจะเป็นตัวหารคู่ของช่วงตารางกริดหลักเสมอ ช่วงเวลาเริ่มต้นสําหรับสเกลเชิงเส้นคือ [1, 1.5, 2, 2.5, 5] และสําหรับสเกลบันทึกคือ [1, 2, 5]

ประเภท: ตัวเลข
ค่าเริ่มต้น:1
hAxis.minorGridlines.minSpacing

พื้นที่ว่างขั้นต่ําเป็นพิกเซลระหว่างตารางกริดย่อยที่อยู่ติดกันและระหว่างตารางกริดย่อยกับตารางกริดหลัก ค่าเริ่มต้นคือ 1/2 นาที minSpacing ของตารางกริดหลักสําหรับสเกลเชิงเส้น และ 1/5 minSpacing สําหรับสเกลบันทึก

ประเภท: ตัวเลข
ค่าเริ่มต้น: ประมวลผลแล้ว
hAxis.minorGridlines.multi

เช่นเดียวกับ gridlines.multiple หลัก

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
hAxis.minorGridlines.units

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

รูปแบบทั่วไปคือ

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
สเกล hAxis.logScale

พร็อพเพอร์ตี้ hAxis ที่ทําให้แกนแนวนอนเป็นสเกลลอการิทึม (ต้องมีค่าทั้งหมดเป็นบวก) ตั้งค่าเป็นจริงสําหรับใช่

ตัวเลือกนี้รองรับเฉพาะแกน continuous

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

พร็อพเพอร์ตี้ hAxis ที่ทําให้แกนแนวนอนเป็นสเกลลอการิทึม อาจมีสถานะใดสถานะหนึ่งต่อไปนี้

  • Null - ไม่มีการปรับขนาดลอการิทึม
  • 'log' - การปรับขนาดลอการิทึม ไม่มีการพล็อตค่าลบและค่าศูนย์ ตัวเลือกนี้เหมือนกับการตั้งค่า hAxis: { logscale: true }
  • "mirrorLog" - การปรับสเกลลอการิทึมที่มีการพล็อตค่าติดลบและศูนย์ ค่าพล็อตของจํานวนที่เป็นค่าลบคือค่าลบของบันทึกของค่าสัมบูรณ์ ค่าที่ใกล้เคียงกับ 0 จะได้รับการพล็อตในสเกลเชิงเส้น

ตัวเลือกนี้รองรับเฉพาะแกน continuous

ประเภท: สตริง
ค่าเริ่มต้น: Null
ตําแหน่งข้อความ hAxis.textPosition

ตําแหน่งของข้อความแกนแนวนอนโดยสัมพันธ์กับพื้นที่แผนภูมิ ค่าที่รองรับ: "out", "in", "none"

ประเภท: สตริง
ค่าเริ่มต้น: "ออก"
รูปแบบข้อความ hAxis.text

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

{ 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>}
HAxis.ticks

แทนที่เครื่องหมายถูกบนแกน X ที่สร้างขึ้นโดยอัตโนมัติด้วยอาร์เรย์ที่ระบุ องค์ประกอบแต่ละรายการของอาร์เรย์ควรเป็นค่าเครื่องหมายถูกที่ถูกต้อง (เช่น จํานวน วันที่ วันที่ หรือช่วงเวลาของวัน) หรือออบเจ็กต์ หากเป็นออบเจ็กต์ ควรมีพร็อพเพอร์ตี้ v สําหรับค่าเครื่องหมายถูก และพร็อพเพอร์ตี้ f ที่ไม่บังคับซึ่งมีสตริงตามตัวอักษรที่จะแสดงเป็นป้ายกํากับ

ระบบจะขยาย viewWindow โดยอัตโนมัติเพื่อรวมเครื่องหมายต่ําสุดและต่ําสุด เว้นแต่คุณจะระบุ viewWindow.min หรือ viewWindow.max เพื่อลบล้าง

ตัวอย่าง:

  • hAxis: { ticks: [5,10,15,20] }
  • hAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • hAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • hAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }

ตัวเลือกนี้ใช้ได้กับแกน continuous เท่านั้น

ประเภท: อาร์เรย์ขององค์ประกอบ
ค่าเริ่มต้น: อัตโนมัติ
ชื่อ hAxis.title

พร็อพเพอร์ตี้ hAxis ที่ระบุชื่อแกนนอน

ประเภท: สตริง
ค่าเริ่มต้น: Null
รูปแบบข้อความ hAxis.titleText

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

{ 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>}
hAxis.allowContainerBoundaryTextCutoff

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

ตัวเลือกนี้รองรับเฉพาะแกน discrete

ประเภท: บูลีน
ค่าเริ่มต้น: เท็จ
ข้อความ hAxis.slantedText

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

ประเภท: บูลีน
ค่าเริ่มต้น: อัตโนมัติ
haxis.slantedTextAngle

มุมของข้อความแกนแนวนอน หากวาดไว้ ไม่ต้องสนใจหาก hAxis.slantedText เป็น false หรืออยู่ในโหมดอัตโนมัติ และแผนภูมิก็ตัดสินใจที่จะวาดข้อความในแนวนอน หากมุมเป็นบวก การหมุน จะทวนเข็มนาฬิกา และหากเป็นค่าลบ ก็จะปรับตามเข็มนาฬิกา

ประเภท: หมายเลข, -90-90
ค่าเริ่มต้น: 30
hAxis.maxAlternation

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
hAxis.maxTextLines

จํานวนบรรทัดสูงสุดที่อนุญาตสําหรับป้ายกํากับข้อความ ป้ายกํากับอาจขยายไปหลายบรรทัดหากยาวเกินไป และจํานวนบรรทัดจะถูกจํากัดตามความสูงของพื้นที่ว่างโดยค่าเริ่มต้น

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
hAxis.minTextSpacing

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: ค่าของ hAxis.textStyle.fontSize
hAxis.showTextAll

จํานวนป้ายกํากับแกนแนวนอนที่จะแสดง โดย 1 หมายถึงแสดงป้ายกํากับทั้งหมด, 2 หมายถึงแสดงป้ายกํากับอื่นๆ ทั้งหมด และอื่นๆ ค่าเริ่มต้นคือพยายามแสดงป้ายกํากับให้ได้มากที่สุดโดยไม่ซ้อนทับกัน

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
hAxis.maxValue

ย้ายค่าสูงสุดของแกนนอนไปยังค่าที่ระบุโดยให้อยู่ทางด้านขวาในแผนภูมิส่วนใหญ่ จะไม่มีผลหากตั้งค่าเป็นค่าที่น้อยกว่าค่าสูงสุด x ของข้อมูล hAxis.viewWindow.max จะลบล้างพร็อพเพอร์ตี้นี้

ตัวเลือกนี้ใช้ได้กับแกน continuous เท่านั้น

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
haxis.minValue

ย้ายค่าขั้นต่ําของแกนนอนไปยังค่าที่ระบุ ซึ่งจะอยู่ทางซ้ายในแผนภูมิส่วนใหญ่ จะไม่มีผลหากตั้งค่าเป็นค่าที่มากกว่าค่า x ขั้นต่ําของข้อมูล hAxis.viewWindow.min จะลบล้างพร็อพเพอร์ตี้นี้

ตัวเลือกนี้ใช้ได้กับแกน continuous เท่านั้น

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
hAxis.viewWindowMode

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

  • "pretty" - ปรับขนาดค่าแนวนอนเพื่อให้ค่าของข้อมูลสูงสุดและต่ําสุดแสดงผลเล็กน้อยทางด้านซ้ายและขวาของพื้นที่แผนภูมิ หน้าต่างมุมมองจะขยายเป็นตารางกริดหลักที่ใกล้ที่สุดสําหรับตัวเลข หรือตารางกริดย่อยที่ใกล้ที่สุดสําหรับวันที่และเวลา
  • "maximized" - ปรับขนาดค่าแนวนอนเพื่อให้ค่าสูงสุดของข้อมูลและค่าขั้นต่ําสัมผัสทางซ้ายและขวาของพื้นที่แผนภูมิ ซึ่งจะทําให้ละเว้น haxis.viewWindow.min และ haxis.viewWindow.max
  • "explicit" - ตัวเลือกที่เลิกใช้งานแล้วสําหรับการระบุค่าขนาดซ้ายและขวาของพื้นที่แผนภูมิ (เลิกใช้งานเนื่องจากซ้ําซ้อนกับ haxis.viewWindow.min และ haxis.viewWindow.max) ระบบจะครอบตัดค่าข้อมูลที่อยู่นอกค่าเหล่านี้ คุณต้องระบุออบเจ็กต์ hAxis.viewWindow ที่อธิบายค่าสูงสุดและค่าต่ําสุดที่จะแสดง

ตัวเลือกนี้ใช้ได้กับแกน continuous เท่านั้น

ประเภท: สตริง
ค่าเริ่มต้น: เทียบเท่ากับ "pretty" แต่ haxis.viewWindow.min และ haxis.viewWindow.max จะมีความสําคัญเหนือกว่าหากใช้
haxis.viewWindow

ระบุช่วงการครอบตัดของแกนแนวนอน

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
hAxis.viewWindow.max

  • สําหรับแกน continuous ให้ทําดังนี้

    ค่าข้อมูลแนวนอนสูงสุดที่จะแสดง

  • สําหรับแกน discrete ให้ทําดังนี้

    ดัชนีแถวฐาน 0 ที่หน้าต่างครอบตัดสิ้นสุด ระบบจะครอบตัดจุดข้อมูลที่ดัชนีนี้ขึ้นไป เมื่อใช้ร่วมกับ vAxis.viewWindowMode.min จะกําหนดช่วงแบบเปิดครึ่งเดียว [นาที สูงสุด) ซึ่งแสดงถึงดัชนีองค์ประกอบที่จะแสดง กล่าวคือ ทุกดัชนีที่ min <= index < max จะแสดง

ไม่สนใจเมื่อ hAxis.viewWindowMode เป็น "สวย" หรือ "ขยายเต็มหน้าจอ"

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
hAxis.viewWindow.min

  • สําหรับแกน continuous ให้ทําดังนี้

    ค่าข้อมูลแนวนอนขั้นต่ําที่จะแสดง

  • สําหรับแกน discrete ให้ทําดังนี้

    ดัชนีแถวฐาน 0 ที่หน้าต่างครอบตัดเริ่มต้น ระบบจะครอบตัดจุดข้อมูลที่ดัชนีต่ํากว่านี้ เมื่อใช้ร่วมกับ vAxis.viewWindowMode.max จะกําหนดช่วงแบบเปิดครึ่งเดียว [นาที สูงสุด) ซึ่งแสดงถึงดัชนีองค์ประกอบที่จะแสดง กล่าวคือ ทุกดัชนีที่ min <= index < max จะแสดง

ไม่สนใจเมื่อ hAxis.viewWindowMode เป็น "สวย" หรือ "ขยายเต็มหน้าจอ"

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

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

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

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

ระบบไม่รองรับแผนภูมินี้พื้นที่ที่มีตัวเลือก isStacked: true/'percent'/'relative'/'absolute'

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

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

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

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

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

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

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

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

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

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
ดัชนีหน้า

ดัชนีหน้าที่เน้นเลข 0 ที่เลือกครั้งแรกของคําอธิบาย

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
ตําแหน่ง.

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

  • "bottom" - ที่อยู่ใต้แผนภูมิ
  • "ซ้าย" - ทางด้านซ้ายของแผนภูมิ หากแกนด้านซ้ายไม่มีชุดที่เชื่อมโยงกับแผนภูมิ ดังนั้นหากต้องการเพิ่มคําอธิบายทางด้านซ้าย ให้ใช้ตัวเลือก targetAxisIndex: 1
  • "in" - ภายในแผนภูมิที่มุมซ้ายบน
  • "none" - จะไม่แสดงคําอธิบาย
  • "right" - ทางด้านขวาของแผนภูมิ ไม่สามารถใช้ร่วมกับตัวเลือก vAxes
  • "ด้านบน" - เหนือแผนภูมิ
ประเภท: สตริง
ค่าเริ่มต้น: "ขวา"
คําอธิบายข้อความรูปแบบ

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

{ 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>}
เส้นไข่ปลา

รูปแบบเปิดและปิดสําหรับเส้นประ เช่น [4, 4] จะเติมขีดกลางยาว 4 ขีดแล้วตามด้วยช่องว่าง 4 จุด และ [5, 1, 3] จะเติมช่องว่างยาว 5 ขีด ช่องว่าง 1 จุด เครื่องหมายขีดกลางยาว 3 จุด ช่องว่าง 5 จุด เส้นประยาว 1 เส้น และช่องว่าง 3 จุด ดูข้อมูลเพิ่มเติมในสายด่วน

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

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
การวางแนว

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

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

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

ประเภท: สตริง
ค่าเริ่มต้น: "วงกลม"
ขนาดจุด

เส้นผ่านศูนย์กลางของจุดที่แสดงเป็นพิกเซล ใช้ 0 เพื่อซ่อนจุดทั้งหมด คุณลบล้างค่าของชุดหนังสือแต่ละชุดได้โดยใช้พร็อพเพอร์ตี้ series หากคุณใช้เทรนด์ ตัวเลือก pointSize จะส่งผลต่อความกว้างของเส้นแนวโน้ม เว้นแต่คุณจะลบล้างค่านั้นด้วยตัวเลือก trendlines.n.pointsize

ประเภท: ตัวเลข
ค่าเริ่มต้น: 0
คะแนนที่มองเห็นได้

กําหนดว่าจะให้แสดงจุดหรือไม่ ตั้งค่าเป็น false เพื่อซ่อนจุดทั้งหมด คุณลบล้างค่าของชุดหนังสือแต่ละชุดได้โดยใช้พร็อพเพอร์ตี้ series หากคุณใช้แนวโน้ม ตัวเลือก pointsVisible จะส่งผลต่อการเปิดเผยจุดในเส้นแนวโน้มทั้งหมด เว้นแต่คุณจะลบล้างตัวเลือกนั้นด้วยตัวเลือก trendlines.n.pointsVisible

และยังลบล้างได้โดยใช้บทบาทสไตล์ในรูปแบบ "point {visible: true}"

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

หากตั้งค่าเป็น "จริง" จะวาดชุดจากขวาไปซ้าย ค่าเริ่มต้นคือวาดจากซ้ายไปขวา

ตัวเลือกนี้รองรับเฉพาะแกน discrete major

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

เมื่อ selectionMode คือ 'multiple' ผู้ใช้อาจเลือกจุดข้อมูลหลายจุด

ประเภท: สตริง
ค่าเริ่มต้น: 'เดี่ยว'
ซีรีส์

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

  • annotations - ออบเจ็กต์ที่จะใช้กับคําอธิบายประกอบสําหรับชุดนี้ การดําเนินการนี้ใช้ควบคุมสิ่งต่างๆ ได้ เช่น textStyle สําหรับชุดหนังสือ 

    series: {
  0: {
    annotations: {
      textStyle: {fontSize: 12, color: 'red' }
    }
  }
}

    ดูตัวเลือกต่างๆ ของ annotations เพื่อดูรายการที่ปรับแต่งได้ทั้งหมด

  • color - สีที่จะใช้สําหรับชุดนี้ ระบุสตริงสี HTML ที่ถูกต้อง
  • curveType - ลบล้างค่า curveType ร่วมสําหรับชุดนี้
  • labelInLegend - คําอธิบายชุดหนังสือที่ต้องการให้ปรากฏในคําอธิบายแผนภูมิ
  • lineDashStyle - ลบล้างค่า lineDashStyle ร่วมสําหรับชุดหนังสือนี้
  • lineWidth - ลบล้างค่า lineWidth ร่วมสําหรับชุดนี้
  • pointShape - ลบล้างค่า pointShape ร่วมสําหรับชุดหนังสือนี้
  • pointSize - ลบล้างค่า pointSize ร่วมสําหรับชุดนี้
  • pointsVisible - ลบล้างค่า pointsVisible ร่วมสําหรับชุดหนังสือนี้
  • targetAxisIndex - แกนอื่นที่จะกําหนดชุดนี้ โดยที่ 0 คือแกนเริ่มต้น และ 1 คือแกนที่ตรงข้ามกัน ค่าเริ่มต้นคือ 0 ตั้งค่าเป็น 1 เพื่อกําหนดแผนภูมิที่จะแสดงชุดต่างๆ กับแกนอื่น จัดสรรอย่างน้อย 1 ชุดให้กับแกนเริ่มต้น คุณสามารถกําหนดสเกลที่แตกต่างกันสําหรับแกนต่างๆ ได้
  • visibleInLegend - ค่าบูลีน โดยที่ค่าจริงหมายความว่าชุดควรมีรายการคําอธิบาย และเท็จหมายความว่าไม่ควรระบุ ค่าเริ่มต้นคือจริง

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

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

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

  • "maximized" - ขยายพื้นที่ของแผนภูมิให้สูงสุด รวมทั้งวาดคําอธิบายและป้ายกํากับทั้งหมดในพื้นที่แผนภูมิ ตั้งค่าตัวเลือกต่อไปนี้ 
    chartArea: {width: '100%', height: '100%'},
legend: {position: 'in'},
titlePosition: 'in', axisTitlesPosition: 'in',
hAxis: {textPosition: 'in'}, vAxis: {textPosition: 'in'}
ประเภท: สตริง
ค่าเริ่มต้น: Null
title

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

ประเภท: สตริง
ค่าเริ่มต้น: ไม่มีชื่อ
ตําแหน่งชื่อ

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

  • in - วาดชื่อภายในพื้นที่ของแผนภูมิ
  • out - วาดชื่อนอกพื้นที่แผนภูมิ
  • ไม่มี - ละเว้นชื่อ
ประเภท: สตริง
ค่าเริ่มต้น: "ออก"
รูปแบบข้อความชื่อ

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

{ 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

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

ประเภท: บูลีน
ค่าเริ่มต้น: อัตโนมัติ
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" - เคล็ดลับเครื่องมือจะแสดงเมื่อผู้ใช้เลือกองค์ประกอบ
ประเภท: สตริง
ค่าเริ่มต้น: "โฟกัส"
เส้นแนวโน้ม

แสดงเส้นแนวโน้มในแผนภูมิในแผนภูมิที่รองรับ โดยค่าเริ่มต้น เราจะใช้เส้นแนวโน้มเชิงเส้น แต่ปรับแต่งด้วยตัวเลือก trendlines.n.type ได้

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

var options = {
  trendlines: {
    0: {
      type: 'linear',
      color: 'green',
      lineWidth: 3,
      opacity: 0.3,
      showR2: true,
      visibleInLegend: true
    }
  }
}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
Trendslines.n.color

สีของเส้นแนวโน้ม แสดงเป็นชื่อสีภาษาอังกฤษหรือสตริงฐานสิบหก

ประเภท: สตริง
ค่าเริ่มต้น: สีเริ่มต้นของชุด
Trendylines.n.องศา

สําหรับ เส้นแนวโน้ม ของ type: 'polynomial', องศาของพหุนาม (2 สําหรับกําลังสอง, 3 สําหรับลูกบาศก์ และอื่นๆ) (องศาเริ่มต้นอาจเปลี่ยนจาก 3 เป็น 2 ใน Google Charts รุ่นที่กําลังจะเปิดตัว)

ประเภท: ตัวเลข
ค่าเริ่มต้น: 3
Trendslines.n.labelInLegend

หากตั้งค่า เส้นแนวโน้ม จะแสดงในคําอธิบายเป็นสตริงนี้

ประเภท: สตริง
ค่าเริ่มต้น: Null
เส้นแนวโน้ม.n.lineWidth

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 2
เส้นแนวโน้ม.p.city

ความโปร่งใสของเส้นแนวโน้มตั้งแต่ 0.0 (โปร่งใส) ถึง 1.0 (ทึบ)

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1.0
เส้นแนวโน้ม.n.pointSize

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
Trendslines.n.points ที่มองเห็นได้

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

ประเภท: บูลีน
ค่าเริ่มต้น: จริง
เส้นแนวโน้ม.n.showR2

จะแสดงสัมประสิทธิ์การตัดสินใจในเคล็ดลับเครื่องมือคําอธิบายหรือเส้นแนวโน้มหรือไม่

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

ไม่ว่า เส้นแนวโน้ม คือ 'linear' (ค่าเริ่มต้น), 'exponential' หรือ 'polynomial'

ประเภท: สตริง
ค่าเริ่มต้น: เชิงเส้น
เส้นแนวโน้ม.n.visibleInLegend

สมการเส้นแนวโน้มจะปรากฏในคําอธิบายหรือไม่ (จะปรากฏในเคล็ดลับเครื่องมือเส้นแนวโน้ม)

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

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

หากต้องการระบุแผนภูมิที่มีแกนแนวตั้งหลายแกน ให้กําหนดแกนใหม่โดยใช้ series.targetAxisIndex แล้วกําหนดค่าแกนโดยใช้ vAxes ตัวอย่างต่อไปนี้จะกําหนดชุดที่ 2 ให้กับแกนที่เหมาะสมและระบุชื่อและรูปแบบข้อความที่กําหนดเอง 

{
  series: {
    2: {
      targetAxisIndex:1
    }
  },
  vAxes: {
    1: {
      title:'Losses',
      textStyle: {color: 'red'}
    }
  }
}

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

vAxes: [
  {}, // Nothing specified for axis 0
  {
    title:'Losses',
    textStyle: {color: 'red'} // Axis 1
  }
]
ประเภท: อาร์เรย์ของออบเจ็กต์หรือออบเจ็กต์ที่มีออบเจ็กต์ย่อย
ค่าเริ่มต้น: Null
VAXIS

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

{title: 'Hello', titleTextStyle: {color: '#FF0000'}}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
vAxis.baseline

พร็อพเพอร์ตี้ vAxis ที่ระบุฐานของแกนตั้ง หากเส้นฐานใหญ่กว่าเส้นตารางกริดสูงสุดหรือเล็กกว่าเส้นตารางกริดต่ําสุด เส้นนั้นจะมีการปัดเศษเป็นตารางกริดที่ใกล้ที่สุด

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
vAxis.baselineColor

ระบุสีของเส้นฐานสําหรับแกนแนวตั้ง อาจเป็นสตริงสี HTML ใดก็ได้ เช่น 'red' หรือ '#00cc00'

ประเภท: ตัวเลข
ค่าเริ่มต้น: "ดํา"
vAxis.direction

ทิศทางที่ค่าในแกนแนวตั้งเติบโต โดยค่าเริ่มต้น ค่าต่ําจะอยู่ที่ด้านล่างของแผนภูมิ ระบุ -1 เพื่อกลับลําดับค่า

ประเภท: 1 หรือ -1
ค่าเริ่มต้น: 1
vAxis.format

สตริงรูปแบบสําหรับป้ายกํากับของแกนตัวเลข นี่เป็นชุดย่อยของชุดรูปแบบ ICU เช่น {format:'#,###%'} จะแสดงค่า "1,000%", "750%" และ "50%" สําหรับค่า 10, 7.5 และ 0.5 คุณยังให้ข้อมูลต่อไปนี้ได้ด้วย

  • {format: 'none'}: แสดงตัวเลขที่ไม่มีการจัดรูปแบบ (เช่น 8000000)
  • {format: 'decimal'}: แสดงตัวเลขที่มีตัวคั่นหลักพัน (เช่น 8,000,000)
  • {format: 'scientific'}: แสดงตัวเลขในรูปแบบวิทยาศาสตร์ (เช่น 8e6)
  • {format: 'currency'}: แสดงหมายเลขโทรศัพท์ในสกุลเงินท้องถิ่น (เช่น 240,000.00 บาท)
  • {format: 'percent'}: แสดงตัวเลขเป็นเปอร์เซ็นต์ (เช่น 800,000,000%)
  • {format: 'short'}: แสดงตัวเลขย่อ (เช่น 8 ล้าน)
  • {format: 'long'}: แสดงตัวเลขเป็นคําเต็ม (เช่น 8 ล้าน)

การจัดรูปแบบจริงที่ใช้กับป้ายกํากับมาจากภาษาที่โหลด API ดูรายละเอียดเพิ่มเติมได้ที่การโหลดแผนภูมิที่มีภาษาเฉพาะ

ในการคํานวณค่าเครื่องหมายถูกและตารางกริด ตัวเลือกชุดค่าผสมหลายรายการของตัวเลือกตารางกริดที่เกี่ยวข้องทั้งหมดจะได้รับการพิจารณา และจะแสดงค่าสํารองหากป้ายกํากับเครื่องหมายถูกที่ซ้ําจะซ้ํากันหรือทับซ้อนกัน ดังนั้น คุณสามารถระบุ format:"#" หากต้องการแสดงเฉพาะค่าเครื่องหมายถูกที่เป็นจํานวนเต็ม แต่โปรดทราบว่าหากไม่มีตัวเลือกที่เป็นไปตามเงื่อนไขนี้ ก็จะไม่มีการแสดงตารางกริดหรือเครื่องหมายถูก

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

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

{color: '#333', minSpacing: 20}
ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
vAxis.gridlines.color

สีของเส้นตารางแนวตั้งภายในพื้นที่ของแผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง

ประเภท: สตริง
ค่าเริ่มต้น: "#CCC"
vAxis.gridlines.count

จํานวนเส้นตารางแนวนอนโดยประมาณในพื้นที่แผนภูมิ หากคุณระบุจํานวนบวกสําหรับ gridlines.count ระบบจะใช้ค่าดังกล่าวในการคํานวณ minSpacing ระหว่างตารางกริด คุณระบุค่า 1 เพื่อวาดตารางกริดได้เพียงรายการเดียว หรือ 0 เพื่อวาดไม่มีเส้นตารางกริด ระบุ -1 ซึ่งเป็นค่าเริ่มต้น เพื่อคํานวณจํานวนตารางกริดโดยอัตโนมัติตามตัวเลือกอื่นๆ

ประเภท: ตัวเลข
ค่าเริ่มต้น: -1
vAxis.gridlines.interval

อาร์เรย์ของขนาด (เป็นค่าข้อมูล ไม่ใช่พิกเซล) ระหว่างเส้นตารางกริดที่อยู่ติดกัน ตัวเลือกนี้มีไว้สําหรับแกนตัวเลขเท่านั้นในขณะนี้ แต่เทียบเท่ากับตัวเลือก gridlines.units.<unit>.interval ซึ่งใช้สําหรับวันที่และเวลาเท่านั้น สําหรับสเกลเชิงเส้น ค่าเริ่มต้นคือ [1, 2, 2.5, 5] ซึ่งหมายความว่าค่าตารางกริดจะอยู่ในทุกหน่วย (1) ในหน่วยเลขคู่ (2) หรือคูณ 2.5 หรือ 5 ก็ได้ กําลังพิจารณาค่า 10 คูณค่าเหล่านี้ (เช่น [10, 20, 25, 50] และ [.1, .2, .25, .5]) สําหรับสเกลบันทึก ค่าเริ่มต้นคือ [1, 2, 5]

ประเภท: จํานวนระหว่าง 1 ถึง 10 แต่ไม่รวม 10
ค่าเริ่มต้น: ประมวลผลแล้ว
vAxis.gridlines.minSpacing

พื้นที่หน้าจอขั้นต่ําเป็นพิกเซลระหว่างตารางกริดหลัก hAxis ค่าเริ่มต้นสําหรับเส้นตารางหลักคือ 40 สําหรับสเกลเชิงเส้น และ 20 สําหรับสเกลบันทึก หากคุณระบุ count ไม่ใช่ minSpacing ระบบจะคํานวณ minSpacing จากจํานวน ในทางกลับกัน หากคุณระบุ minSpacing ไม่ใช่ count ระบบจะคํานวณจํานวนจาก minSpacing หากคุณระบุทั้ง 2 รูปแบบ minSpacing จะลบล้างค่านั้น

ประเภท: ตัวเลข
ค่าเริ่มต้น: ประมวลผลแล้ว
vAxis.gridlines.multi

ค่าตารางกริดและเครื่องหมายถูกทั้งหมดต้องเป็นหลายค่าของตัวเลือกนี้ โปรดทราบว่าจะไม่นับ 10 คูณกับกําลังของค่าหลายครั้ง ซึ่งต่างจากช่วงเวลา คุณสามารถบังคับให้เห็บเป็นจํานวนเต็มได้โดยระบุ gridlines.multiple = 1 หรือบังคับให้เห็บคูณด้วย 1,000 โดยระบุ gridlines.multiple = 1000

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
vAxis.gridlines.units

ลบล้างรูปแบบเริ่มต้นสําหรับแง่มุมต่างๆ ของข้อมูลประเภทวันที่/วันที่และเวลา/ช่วงเวลาของวัน เมื่อใช้ร่วมกับตารางกริดที่คํานวณโดยแผนภูมิ อนุญาตการจัดรูปแบบปี เดือน วัน ชั่วโมง นาที วินาที และมิลลิวินาที

รูปแบบทั่วไปคือ

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]},
    hours: {format: [/*format strings here*/]},
    minutes: {format: [/*format strings here*/]},
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]}
  }
}

ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
vAxis.minorGridlines

ออบเจ็กต์ที่มีสมาชิกเพื่อกําหนดค่าตารางกริดย่อยในแกนแนวตั้ง ซึ่งคล้ายกับตัวเลือก vAxis.gridlines

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
vAxis.minorGridlines.color

สีของตารางกริดย่อยแนวตั้งภายในพื้นที่แผนภูมิ ระบุสตริงสี HTML ที่ถูกต้อง

ประเภท: สตริง
ค่าเริ่มต้น: ชุดค่าผสมของเส้นตารางและสีพื้นหลัง
vAxis.minorGridlines.count

ตัวเลือก BigQueryGridlines.count ส่วนใหญ่เลิกใช้งานแล้ว ยกเว้นการปิดใช้ตารางกริดย่อยโดยตั้งค่าจํานวนเป็น 0 จํานวนเส้นตารางย่อยจะขึ้นอยู่กับช่วงเวลาระหว่างเส้นตารางหลัก (ดู vAxis.gridlines.interval) และพื้นที่ขั้นต่ําที่ต้องระบุ (ดู vAxis.minorGridlines.minSpacing)

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
vAxis.minorGridlines.interval

ตัวเลือก BigQueryGridlines.interval เหมือนกับตัวเลือกช่วงตารางกริดหลัก แต่ช่วงที่เลือกจะเป็นตัวหารคู่ของช่วงตารางกริดหลักเสมอ ช่วงเวลาเริ่มต้นสําหรับสเกลเชิงเส้นคือ [1, 1.5, 2, 2.5, 5] และสําหรับสเกลบันทึกคือ [1, 2, 5]

ประเภท: ตัวเลข
ค่าเริ่มต้น:1
vAxis.minorGridlines.minSpacing

พื้นที่ว่างขั้นต่ําเป็นพิกเซลระหว่างตารางกริดย่อยที่อยู่ติดกันและระหว่างตารางกริดย่อยกับตารางกริดหลัก ค่าเริ่มต้นคือ 1/2 นาที minSpacing ของตารางกริดหลักสําหรับสเกลเชิงเส้น และ 1/5 minSpacing สําหรับสเกลบันทึก

ประเภท: ตัวเลข
ค่าเริ่มต้น: ประมวลผลแล้ว
vAxis.minorGridlines.multi

เช่นเดียวกับ gridlines.multiple หลัก

ประเภท: ตัวเลข
ค่าเริ่มต้น: 1
vAxis.minorGridlines.units

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

รูปแบบทั่วไปคือ

gridlines: {
  units: {
    years: {format: [/*format strings here*/]},
    months: {format: [/*format strings here*/]},
    days: {format: [/*format strings here*/]}
    hours: {format: [/*format strings here*/]}
    minutes: {format: [/*format strings here*/]}
    seconds: {format: [/*format strings here*/]},
    milliseconds: {format: [/*format strings here*/]},
  }
}

ดูข้อมูลเพิ่มเติมได้ในวันที่และเวลา

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
vAxis.logScale

หากเป็นจริง ให้แกนแนวตั้งเป็นสเกลลอการิทึม หมายเหตุ: ค่าทั้งหมดต้องเป็นบวก

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

พร็อพเพอร์ตี้ vAxis ที่ทําให้แกนแนวตั้งเป็นสเกลลอการิทึม อาจมีสถานะใดสถานะหนึ่งต่อไปนี้

  • Null - ไม่มีการปรับขนาดลอการิทึม
  • 'log' - การปรับขนาดลอการิทึม ไม่มีการพล็อตค่าลบและค่าศูนย์ ตัวเลือกนี้เหมือนกับการตั้งค่า vAxis: { logscale: true }
  • "mirrorLog" - การปรับสเกลลอการิทึมที่มีการพล็อตค่าติดลบและศูนย์ ค่าพล็อตของจํานวนที่เป็นค่าลบคือค่าลบของบันทึกของค่าสัมบูรณ์ ค่าที่ใกล้เคียงกับ 0 จะได้รับการพล็อตในสเกลเชิงเส้น

ตัวเลือกนี้รองรับเฉพาะแกน continuous

ประเภท: สตริง
ค่าเริ่มต้น: Null
vAxis.textPosition

ตําแหน่งของข้อความแกนแนวตั้งเมื่อเทียบกับพื้นที่แผนภูมิ ค่าที่รองรับ: "out", "in", "none"

ประเภท: สตริง
ค่าเริ่มต้น: "ออก"
vAxis.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>}
vAxis.ticks

แทนที่จุดทําเครื่องหมายแกน Y ที่สร้างขึ้นโดยอัตโนมัติด้วยอาร์เรย์ที่ระบุ องค์ประกอบแต่ละรายการของอาร์เรย์ควรเป็นค่าเครื่องหมายถูกที่ถูกต้อง (เช่น จํานวน วันที่ วันที่ หรือช่วงเวลาของวัน) หรือออบเจ็กต์ หากเป็นออบเจ็กต์ ควรมีพร็อพเพอร์ตี้ v สําหรับค่าเครื่องหมายถูก และพร็อพเพอร์ตี้ f ที่ไม่บังคับซึ่งมีสตริงตามตัวอักษรที่จะแสดงเป็นป้ายกํากับ

ระบบจะขยาย viewWindow โดยอัตโนมัติเพื่อรวมเครื่องหมายต่ําสุดและต่ําสุด เว้นแต่คุณจะระบุ viewWindow.min หรือ viewWindow.max เพื่อลบล้าง

ตัวอย่าง:

  • vAxis: { ticks: [5,10,15,20] }
  • vAxis: { ticks: [{v:32, f:'thirty two'}, {v:64, f:'sixty four'}] }
  • vAxis: { ticks: [new Date(2014,3,15), new Date(2013,5,15)] }
  • vAxis: { ticks: [16, {v:32, f:'thirty two'}, {v:64, f:'sixty four'}, 128] }
ประเภท: อาร์เรย์ขององค์ประกอบ
ค่าเริ่มต้น: อัตโนมัติ
vAxis.title

พร็อพเพอร์ตี้ vAxis ที่ระบุชื่อสําหรับแกนตั้ง

ประเภท: สตริง
ค่าเริ่มต้น: ไม่มีชื่อ
vAxis.titleTextStyle

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

{ 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>}
vAxis.maxValue

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

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
vAxis.minValue

ย้ายค่าขั้นต่ําของแกนแนวตั้งไปยังค่าที่ระบุ ซึ่งจะลดลงในแผนภูมิส่วนใหญ่ จะไม่มีผลหากตั้งค่าเป็นค่าที่มากกว่าค่า y ต่ําสุดของข้อมูล vAxis.viewWindow.min จะลบล้างพร็อพเพอร์ตี้นี้

ประเภท: ตัวเลข
ค่าเริ่มต้น: Null
vAxis.viewWindowMode

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

  • "ttty" - ปรับขนาดค่าแนวตั้งเพื่อให้ค่าสูงสุดของข้อมูลและค่าขั้นต่ําแสดงเล็กน้อยที่ด้านล่างและด้านบนของพื้นที่แผนภูมิ หน้าต่างมุมมองจะขยายเป็นตารางกริดหลักที่ใกล้ที่สุดสําหรับตัวเลข หรือตารางกริดย่อยที่ใกล้ที่สุดสําหรับวันที่และเวลา
  • "maximized" - ปรับขนาดค่าแนวตั้งเพื่อให้ค่าสูงสุดและค่าต่ําสุดของข้อมูลสัมผัสที่ด้านบนและด้านล่างของพื้นที่แผนภูมิ ซึ่งจะทําให้ละเว้น vaxis.viewWindow.min และ vaxis.viewWindow.max
  • "explicit" - ตัวเลือกที่เลิกใช้งานแล้วสําหรับการระบุค่าขนาดด้านบนและด้านล่างของพื้นที่แผนภูมิ (เลิกใช้งานเนื่องจากซ้ําซ้อนกับ vaxis.viewWindow.min และ vaxis.viewWindow.max ระบบจะครอบตัดค่าข้อมูลที่อยู่นอกค่าเหล่านี้ คุณต้องระบุออบเจ็กต์ vAxis.viewWindow ที่อธิบายค่าสูงสุดและค่าต่ําสุดที่จะแสดง
ประเภท: สตริง
ค่าเริ่มต้น: เทียบเท่ากับ "pretty" แต่ vaxis.viewWindow.min และ vaxis.viewWindow.max จะมีความสําคัญเหนือกว่าหากใช้
vAxis.viewWindow

ระบุช่วงการครอบตัดของแกนแนวตั้ง

ประเภท: ออบเจ็กต์
ค่าเริ่มต้น: Null
vAxis.viewWindow.max

ค่าของข้อมูลแนวตั้งสูงสุดที่จะแสดงผล

ไม่สนใจเมื่อ vAxis.viewWindowMode เป็น "สวย" หรือ "ขยายเต็มหน้าจอ"

ประเภท: ตัวเลข
ค่าเริ่มต้น: อัตโนมัติ
vAxis.viewWindow.min

ค่าข้อมูลแนวตั้งขั้นต่ําที่จะแสดง

ไม่สนใจเมื่อ vAxis.viewWindowMode เป็น "สวย" หรือ "ขยายเต็มหน้าจอ"

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

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

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

เมธอด

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

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

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

เหตุการณ์

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

ชื่อ
animationfinish

เริ่มทํางานเมื่อภาพเคลื่อนไหวการเปลี่ยนเสร็จสมบูรณ์

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

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

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

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

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

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

พร็อพเพอร์ตี้: currentPageIndex, totalpages
onmouseover

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

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

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

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

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

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

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

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

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

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