การปรับแต่งแกน

  1. ภาพรวม
  2. คำศัพท์
  3. ไม่ต่อเนื่องกับแบบต่อเนื่อง
  4. สเกลแกน
  5. รูปแบบตัวเลข

ภาพรวม

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

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

  • ไม่ต่อเนื่องกับแบบต่อเนื่อง
  • ทิศทาง - คุณสามารถปรับแต่งทิศทางโดยใช้ตัวเลือก hAxis/vAxis.direction
  • ตำแหน่งและรูปแบบป้ายกำกับ - คุณสามารถปรับแต่งตำแหน่งและรูปแบบของป้ายกำกับโดยใช้ตัวเลือก hAxis/vAxis.textPosition และ hAxis/vAxis.textStyle
  • ข้อความและรูปแบบชื่อแกน - คุณสามารถปรับแต่งข้อความและรูปแบบของชื่อแกนได้โดยใช้ตัวเลือก hAxis/vAxis.title และ hAxis/vAxis.titleTextStyle
  • สเกลแกน - คุณตั้งค่าสเกลของแกนเป็นสเกลลอการิทึม (log) ได้โดยใช้ตัวเลือก hAxis/vAxis.logScale หรือ hAxis/vAxis.scaleType
  • ดูรายการตัวเลือกการกำหนดค่าแกนทั้งหมดได้ที่ตัวเลือก hAxis และ vAxis ในเอกสารประกอบสำหรับแผนภูมิที่ต้องการ

คำศัพท์

แกนหลัก/แกนรอง:

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

แกนที่ไม่ต่อเนื่อง/ต่อเนื่อง:

  • แกนที่ไม่ต่อเนื่องมีจำนวนจำกัดของค่าที่เว้นระยะห่างเท่าๆ กัน ซึ่งเรียกว่า "หมวดหมู่"
  • แกนต่อเนื่องมีค่าที่เป็นไปได้ไม่สิ้นสุด

ไม่ต่อเนื่องกับแบบต่อเนื่อง

แกนหลักของแผนภูมิอาจแยกไม่ต่อเนื่องหรือต่อเนื่อง เมื่อใช้แกนที่แยกกัน จุดข้อมูลของแต่ละชุดจะมีระยะห่างเท่าๆ กันทั่วทั้งแกนตามดัชนีแถว เมื่อใช้แกนต่อเนื่อง จุดข้อมูลจะมีตำแหน่งตามค่าโดเมน

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

แกนต่อไปนี้เป็นแบบต่อเนื่องเสมอ

  • แผนภูมิฟองอากาศทั้ง 2 แกน
  • แกนรอง

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

  • สำหรับแกนที่ไม่ต่อเนื่อง ให้ตั้งค่าประเภทคอลัมน์ข้อมูลเป็น string
  • สำหรับแกนต่อเนื่อง ให้ตั้งค่าประเภทคอลัมน์ข้อมูลเป็น number, date, datetime หรือ timeofday
ไม่ต่อเนื่อง / ต่อเนื่อง ประเภทคอลัมน์แรก ตัวอย่าง
ไม่ต่อเนื่อง string
ต่อเนื่อง ตัวเลข
ต่อเนื่อง วันที่

สเกลแกน

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

  vAxis: {
        scaleType: 'log'
  }

แผนภูมิเส้นต่อไปนี้แสดงการเติบโตของประชากรโลกในสเกลเชิงเส้น (มาตรฐาน) และสเกลบันทึก

หากข้อมูลมีค่าเป็น 0 หรือเป็นค่าลบ คุณสามารถพล็อตจุดโดยใช้ตัวเลือก scaleType: 'mirrorLog' ในสเกลบันทึกมิเรอร์ ค่าที่พล็อตของจำนวนลบคือลบด้วยบันทึกค่าสัมบูรณ์ของจำนวน ระบบจะพล็อตค่าที่ใกล้เคียงกับ 0 ในการวัดเชิงเส้น

ตัวอย่างต่อไปนี้แสดงจำนวนฟีโบนักชีที่เป็นบวกและลบที่พล็อตในสเกลบันทึกมิเรอร์และสเกลเชิงเส้น

รูปแบบตัวเลข

คุณสามารถควบคุมการจัดรูปแบบหมายเลขป้ายกำกับด้วย hAxis.format และ vAxis.format เช่น {hAxis: { 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,000.00 บาท)
  • {format: 'percent'}: แสดงตัวเลขเป็นเปอร์เซ็นต์ (เช่น 800,000,000%)
  • {format: 'short'}: แสดงตัวเลขแบบย่อ (เช่น 8 ล้าน)
  • {format: 'long'}: แสดงตัวเลขเป็นคำที่สมบูรณ์ (เช่น 8 ล้าน)

ในแผนภูมิด้านล่าง คุณเลือกค่าที่กำหนดล่วงหน้าได้

หน้าเว็บที่สมบูรณ์ของแผนภูมิด้านบนจะตามมา

 

<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(drawStuff);

        function drawStuff() {
          var data = new google.visualization.DataTable();
          data.addColumn('string', 'Country');
          data.addColumn('number', 'GDP');
          data.addRows([
            ['US', 16768100],
            ['China', 9181204],
            ['Japan', 4898532],
            ['Germany', 3730261],
            ['France', 2678455]
          ]);

         var options = {
           title: 'GDP of selected countries, in US $millions',
           width: 500,
           height: 300,
           legend: 'none',
           bar: {groupWidth: '95%'},
           vAxis: { gridlines: { count: 4 } }
         };

         var chart = new google.visualization.ColumnChart(document.getElementById('number_format_chart'));
         chart.draw(data, options);

         document.getElementById('format-select').onchange = function() {
           options['vAxis']['format'] = this.value;
           chart.draw(data, options);
         };
      };
    </script>
  </head>
  <body>
    <select id="format-select">
      <option value="">none</option>
      <option value="decimal" selected>decimal</option>
      <option value="scientific">scientific</option>
      <option value="percent">percent</option>
      <option value="currency">currency</option>
      <option value="short">short</option>
      <option value="long">long</option>
    </select>
    <div id="number_format_chart">
  </body>
</html>

เมื่อใช้รูปแบบที่ใช้ข้อความ (เช่น รูปแบบ long ซึ่งจะแสดงผล 8,000,000 เป็น "8 ล้าน" คุณสามารถแปลสตริงเป็นภาษาอื่นๆ ได้โดยระบุรหัสภาษาเมื่อโหลดไลบรารี Google แผนภูมิ ตัวอย่างเช่น หากต้องการเปลี่ยน "8 ล้าน" เป็นภาษารัสเซีย "8 миллиона" ให้เรียกไลบรารีดังนี้:

<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
  google.charts.load('current', {'packages': ['corechart'], 'language': 'ru'});
  google.charts.setOnLoadCallback(drawMarkersMap);
</script>