GWT Google Charts - คู่มือฉบับย่อ

Google Chartsเป็นไลบรารีการสร้างแผนภูมิแบบ JavaScript ที่มีวัตถุประสงค์เพื่อปรับปรุงเว็บแอปพลิเคชันโดยเพิ่มความสามารถในการสร้างแผนภูมิแบบโต้ตอบ รองรับแผนภูมิที่หลากหลาย แผนภูมิถูกวาดโดยใช้ SVG ในเบราว์เซอร์มาตรฐานเช่น Chrome, Firefox, Safari, Internet Explorer (IE) ใน IE 6 แบบเดิม VML จะใช้ในการวาดกราฟิก

Google Chart Java Moduleเป็นไลบรารีที่ใช้ java แบบโอเพนซอร์สเพื่อมอบการแสดงภาพแผนภูมิ Google ที่สวยงามและมีคุณลักษณะมากมายภายในแอปพลิเคชัน GWT และสามารถใช้ร่วมกับไลบรารีวิดเจ็ต GWT มีบทที่กล่าวถึงส่วนประกอบพื้นฐานทั้งหมดของ Google Charts พร้อมตัวอย่างที่เหมาะสมภายในแอปพลิเคชัน GWT

คุณสมบัติ

ต่อไปนี้เป็นคุณสมบัติเด่นของห้องสมุด Google Charts

Compatability - ใช้งานได้กับเบราว์เซอร์และแพลตฟอร์มมือถือหลัก ๆ ทั้งหมดเช่น Android และ iOS
Multitouch Support- รองรับมัลติทัชบนแพลตฟอร์มที่ใช้หน้าจอสัมผัสเช่น Android และ iOS เหมาะสำหรับ iPhone / iPad และสมาร์ทโฟน / แท็บเล็ตที่ใช้ Android
Free to Use - โอเพ่นซอร์สและใช้งานได้ฟรีเพื่อจุดประสงค์ที่ไม่ใช่เชิงพาณิชย์
Lightweight - ไลบรารีหลัก loader.js เป็นไลบรารีที่มีน้ำหนักเบามาก
Simple Configurations - ใช้ json เพื่อกำหนดการกำหนดค่าต่างๆของแผนภูมิและง่ายต่อการเรียนรู้และใช้งาน
Dynamic - อนุญาตให้แก้ไขแผนภูมิแม้หลังจากสร้างแผนภูมิแล้ว
Multiple axes- ไม่ จำกัด เฉพาะแกน x, y รองรับหลายแกนบนแผนภูมิ
Configurable tooltips- Tooltip เกิดขึ้นเมื่อผู้ใช้วางเมาส์เหนือจุดใด ๆ บนแผนภูมิ googlecharts มีคำแนะนำเครื่องมือในตัวจัดรูปแบบหรือตัวจัดรูปแบบการเรียกกลับเพื่อควบคุมคำแนะนำเครื่องมือโดยทางโปรแกรม
DateTime support- จัดการวันเวลาเป็นพิเศษ ให้การควบคุม inbuilt มากมายในหมวดหมู่ที่ชาญฉลาดวันที่
Print - พิมพ์แผนภูมิโดยใช้หน้าเว็บ
External data- รองรับการโหลดข้อมูลแบบไดนามิกจากเซิร์ฟเวอร์ ให้การควบคุมข้อมูลโดยใช้ฟังก์ชันการโทรกลับ
Text Rotation - รองรับการหมุนฉลากในทิศทางใดก็ได้

ประเภทแผนภูมิที่รองรับ

ห้องสมุด Google Charts มีแผนภูมิประเภทต่อไปนี้ -

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	Line Charts ใช้ในการวาดแผนภูมิตามเส้น / เส้นโค้ง
2	Area Charts ใช้เพื่อวาดแผนภูมิพื้นที่ที่ชาญฉลาด
3	Pie Charts ใช้ในการวาดแผนภูมิวงกลม
4	Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines ใช้เพื่อวาดแผนภูมิที่กระจัดกระจาย
5	Bubble Charts ใช้เพื่อวาดแผนภูมิฟอง
6	Dynamic Charts ใช้เพื่อวาดแผนภูมิแบบไดนามิกที่ผู้ใช้สามารถแก้ไขแผนภูมิได้
7	Combinations ใช้เพื่อวาดการรวมกันของแผนภูมิต่างๆ
8	3D Charts ใช้เพื่อวาดแผนภูมิ 3 มิติ
9	Angular Gauges ใช้ในการวาดแผนภูมิประเภทมาตรวัดความเร็ว
10	Heat Maps ใช้ในการวาดแผนที่ความร้อน
11	Tree Maps ใช้ในการวาดแผนที่ต้นไม้

ในบทต่อไปเราจะพูดถึงแผนภูมิแต่ละประเภทที่กล่าวถึงข้างต้นโดยละเอียดพร้อมตัวอย่าง

ใบอนุญาต

Google Charts เป็นโอเพ่นซอร์สและใช้งานได้ฟรี ตามลิงค์: เงื่อนไขการให้บริการ

บทแนะนำนี้จะแนะนำคุณเกี่ยวกับวิธีเตรียมสภาพแวดล้อมการพัฒนาเพื่อเริ่มงานของคุณด้วย Google Charts และ GWT Framework บทช่วยสอนนี้จะสอนวิธีตั้งค่า JDK, Tomcat และ Eclipse บนเครื่องของคุณก่อนที่คุณจะตั้งค่า GWT Framework -

ความต้องการของระบบ

GWT ต้องใช้ JDK 1.6 ขึ้นไปดังนั้นข้อกำหนดแรกสุดคือต้องติดตั้ง JDK ในเครื่องของคุณ

JDK	1.6 ขึ้นไป
หน่วยความจำ	ไม่มีข้อกำหนดขั้นต่ำ
พื้นที่ดิสก์	ไม่มีข้อกำหนดขั้นต่ำ
ระบบปฏิบัติการ	ไม่มีข้อกำหนดขั้นต่ำ

ทำตามขั้นตอนที่กำหนดเพื่อตั้งค่าสภาพแวดล้อมของคุณเพื่อเริ่มการพัฒนาแอปพลิเคชัน GWT

ขั้นตอนที่ 1 - ตรวจสอบการติดตั้ง Java บนเครื่องของคุณ

ตอนนี้เปิดคอนโซลและดำเนินการคำสั่ง java ต่อไปนี้

ระบบปฏิบัติการ	งาน	คำสั่ง
Windows	เปิด Command Console	c: \> java - เวอร์ชัน
Linux	เปิด Command Terminal	$ java - รุ่น
Mac	เปิด Terminal	เครื่อง: ~ joseph $ java -version

มาตรวจสอบผลลัพธ์ของระบบปฏิบัติการทั้งหมดกัน

ซีเนียร์	ระบบปฏิบัติการและเอาต์พุตที่สร้างขึ้น
1	Windows เวอร์ชัน java "1.6.0_21" Java (TM) SE Runtime Environment (สร้าง 1.6.0_21-b07) Java HotSpot (TM) Client VM (build 17.0-b17, โหมดผสม, การแชร์)
2	Linux เวอร์ชัน java "1.6.0_21" Java (TM) SE Runtime Environment (สร้าง 1.6.0_21-b07) ava HotSpot (TM) Client VM (build 17.0-b17, โหมดผสม, การแชร์)
3	Mac เวอร์ชัน java "1.6.0_21" Java (TM) SE Runtime Environment (สร้าง 1.6.0_21-b07) Java HotSpot (TM) 64-Bit Server VM (build 17.0-b17, โหมดผสม, การแชร์)

ขั้นตอนที่ 2 - ตั้งค่า Java Development Kit (JDK)

หากคุณไม่ได้มีการติดตั้ง Java แล้วคุณสามารถติดตั้งซอฟท์แว Java Development Kit (SDK) จากเว็บไซต์ Java ของออราเคิล: Java SE ดาวน์โหลด คุณจะพบคำแนะนำในการติดตั้ง JDK ในไฟล์ที่ดาวน์โหลดทำตามคำแนะนำที่กำหนดเพื่อติดตั้งและกำหนดค่าการตั้งค่า สุดท้ายตั้งค่าตัวแปรสภาพแวดล้อม PATH และ JAVA_HOME เพื่ออ้างถึงไดเร็กทอรีที่มี java และ javac โดยทั่วไปคือ java_install_dir / bin และ java_install_dir ตามลำดับ

ตั้งค่า JAVA_HOMEตัวแปรสภาพแวดล้อมเพื่อชี้ไปยังตำแหน่งไดเร็กทอรีฐานที่ติดตั้ง Java บนเครื่องของคุณ ตัวอย่างเช่น

ซีเนียร์	ระบบปฏิบัติการและเอาต์พุต
1	Windows ตั้งค่าตัวแปรสภาพแวดล้อม JAVA_HOME เป็น C: \ Program Files \ Java \ jdk1.6.0_21
2	Linux ส่งออก JAVA_HOME = / usr / local / java-current
3	Mac ส่งออก JAVA_HOME = / Library / Java / Home

ผนวกตำแหน่งคอมไพเลอร์ Java เข้ากับ System Path

ซีเนียร์	ระบบปฏิบัติการและเอาต์พุต
1	Windows ต่อท้ายสตริง% JAVA_HOME% \ bin ต่อท้ายตัวแปรระบบ Path
2	Linux ส่งออก PATH = $ PATH: $ JAVA_HOME / bin /
3	Mac ไม่จำเป็นต้องใช้

หรือหากคุณใช้ Integrated Development Environment (IDE) เช่น Borland JBuilder, Eclipse, IntelliJ IDEA หรือ Sun ONE Studio ให้คอมไพล์และรันโปรแกรมง่ายๆเพื่อยืนยันว่า IDE รู้ตำแหน่งที่คุณติดตั้ง Java หรือทำการตั้งค่าที่เหมาะสมตามเอกสารที่กำหนด ของ IDE

ขั้นตอนที่ 3 - ตั้งค่า Eclipse IDE

ตัวอย่างทั้งหมดในบทช่วยสอนนี้เขียนขึ้นโดยใช้ Eclipse IDE ดังนั้นฉันขอแนะนำให้คุณติดตั้ง Eclipse เวอร์ชันล่าสุดในเครื่องของคุณตามระบบปฏิบัติการของคุณ

ในการติดตั้ง Eclipse IDE ให้ดาวน์โหลดไบนารี Eclipse ล่าสุดจาก https://www.eclipse.org/downloads/. เมื่อคุณดาวน์โหลดการติดตั้งแล้วให้แกะการกระจายไบนารีในตำแหน่งที่สะดวก ตัวอย่างเช่นใน C: \ eclipse บน windows หรือ / usr / local / eclipse บน Linux / Unix และสุดท้ายตั้งค่าตัวแปร PATH ให้เหมาะสม

Eclipse สามารถเริ่มต้นได้โดยดำเนินการคำสั่งต่อไปนี้บนเครื่อง windows หรือคุณสามารถดับเบิลคลิกที่ eclipse.exe

%C:\eclipse\eclipse.exe

Eclipse สามารถเริ่มต้นได้โดยดำเนินการคำสั่งต่อไปนี้บนเครื่อง Unix (Solaris, Linux และอื่น ๆ ) -

$/usr/local/eclipse/eclipse

หลังจากเริ่มต้นสำเร็จหากทุกอย่างเรียบร้อยดีก็ควรแสดงผล

ขั้นตอนที่ 4: ติดตั้ง GWT SDK & Plugin สำหรับ Eclipse

ทำตามคำแนะนำที่ให้ไว้ที่ลิงค์Plugin for Eclipse (รวม SDKs)เพื่อติดตั้ง GWT SDK & Plugin for Eclipse เวอร์ชันที่ติดตั้งบนเครื่องของคุณ

หลังจากตั้งค่าปลั๊กอิน GWT สำเร็จแล้วหากทุกอย่างเรียบร้อยดีควรแสดงหน้าจอต่อไปนี้ด้วย Google icon ทำเครื่องหมายด้วยสี่เหลี่ยมผืนผ้าสีแดง

ขั้นตอนที่ 5: ติดตั้ง Google Charts

ดาวน์โหลด Google Charts jar ล่าสุดจากหน้าMVN Repositoryและเพิ่มลงใน classpath ของโปรเจ็กต์

เพิ่มรายการต่อไปนี้ในไฟล์ <project-name> .gwt.xml

<inherits name = "com.googlecode.gwt.charts.Charts"/>

ในบทนี้เราจะแสดงการกำหนดค่าที่จำเป็นในการวาดแผนภูมิโดยใช้ Google Charts API ใน GWT

ขั้นตอนที่ 1: สร้างแอปพลิเคชัน GWT

ทำตามขั้นตอนต่อไปนี้เพื่ออัปเดตแอปพลิเคชัน GWT ที่เราสร้างในGWT - สร้างบทแอปพลิเคชัน -

ขั้นตอน	คำอธิบาย
1	สร้างโครงการที่มีชื่อHelloWorldภายใต้แพคเกจcom.tutorialspointตามที่อธิบายไว้ในGWT - สร้างแอพลิเคชันบท
2	แก้ไขHelloWorld.gwt.xml , HelloWorld.htmlและHelloWorld.javaตามที่อธิบายด้านล่าง เก็บไฟล์ที่เหลือไว้ไม่เปลี่ยนแปลง
3	คอมไพล์และเรียกใช้แอปพลิเคชันเพื่อตรวจสอบผลลัพธ์ของตรรกะที่ใช้งาน

ต่อไปนี้เป็นเนื้อหาของตัวอธิบายโมดูลที่แก้ไข src/com.tutorialspoint/HelloWorld.gwt.xml.

<?xml version = "1.0" encoding = "UTF-8"?>
<module rename-to = 'helloworld'>
   <inherits name = 'com.google.gwt.user.User'/>
   <inherits name = 'com.google.gwt.user.theme.clean.Clean'/>
   <entry-point class = 'com.tutorialspoint.client.HelloWorld'/>
   <inherits name="com.googlecode.gwt.charts.Charts"/>
   <source path = 'client'/>
   <source path = 'shared'/>
</module>

ต่อไปนี้เป็นเนื้อหาของไฟล์โฮสต์ HTML ที่แก้ไข war/HelloWorld.html.

<html>
   <head>
      <title>GWT Highcharts Showcase</title>
      <link rel = "stylesheet" href = "HelloWorld.css"/>
      <script language = "javascript" src = "helloworld/helloworld.nocache.js">
   </head>
   <body>    
   </body>
</html>

เราจะเห็น HelloWorld.java ที่อัปเดตในตอนท้ายหลังจากทำความเข้าใจกับการกำหนดค่าแล้ว

ขั้นตอนที่ 2: สร้างการกำหนดค่า

โหลดไลบรารีและสร้างแผนภูมิ

โหลดไลบรารีโดยใช้ ChartLoader จากนั้นสร้างแผนภูมิ

ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
chartLoader.loadApi(new Runnable() {
   public void run() {
      // Create and attach the chart
      PieChart chart = new PieChart();           
   } 
});

ตารางข้อมูล

กำหนดค่ารายละเอียดโดยการสร้างตารางข้อมูล

// Prepare the data
DataTable data = DataTable.create();
data.addColumn(ColumnType.STRING, "Browser");
data.addColumn(ColumnType.NUMBER, "Percentage");
data.addRow("Firefox", 45.0);
data.addRow("IE", 26.8);
data.addRow("Chrome", 12.8);
data.addRow("Safari", 8.5);
data.addRow("Opera", 6.2);
data.addRow("Others", 0.7);

// Draw the chart
chart.draw(data);

ขนาด

กำหนดค่าความกว้างและความสูงที่จะตั้งค่า

chart.setWidth("700px");
chart.setHeight("700px");

ขั้นตอนที่ 3: เพิ่มแผนภูมิในแผงหลัก

เรากำลังเพิ่มแผนภูมิในแผงราก

RootPanel.get().add(chart);

ตัวอย่าง

พิจารณาตัวอย่างต่อไปนี้เพื่อทำความเข้าใจไวยากรณ์การกำหนดค่าเพิ่มเติม -

HelloWorld.java

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;
import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.PieChart;

public class HelloWorld implements EntryPoint {
   private PieChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new PieChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.STRING, "Browser");
      data.addColumn(ColumnType.NUMBER, "Percentage");
      data.addRow("Firefox", 45.0);
      data.addRow("IE", 26.8);
      data.addRow("Chrome", 12.8);
      data.addRow("Safari", 8.5);
      data.addRow("Opera", 6.2);
      data.addRow("Others", 0.7);

      // Draw the chart
      chart.draw(data);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

ผลลัพธ์

ตรวจสอบผลลัพธ์

แผนภูมิพื้นที่ใช้เพื่อวาดแผนภูมิตามพื้นที่ ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตามพื้นที่ดังต่อไปนี้

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	พื้นที่พื้นฐาน แผนภูมิพื้นที่พื้นฐาน
2	พื้นที่ที่มีค่าลบ แผนภูมิพื้นที่มีค่าเป็นลบ
3	พื้นที่ที่ซ้อนกัน แผนภูมิที่มีพื้นที่ซ้อนทับกัน
4	พื้นที่ที่มีจุดที่ขาดหายไป แผนภูมิที่มีจุดที่ขาดหายไปในข้อมูล

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

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	เบสิคบาร์ แผนภูมิแท่งพื้นฐาน
2	แผนภูมิแท่งที่จัดกลุ่ม แผนภูมิแท่งที่จัดกลุ่ม
3	บาร์ซ้อน แผนภูมิแท่งที่มีแถบซ้อนทับกัน
4	แถบลบ แผนภูมิแท่งที่มีสแต็กลบ
5	แผนภูมิแท่งแตกต่าง แผนภูมิแท่งแสดงความแตกต่าง

แผนภูมิฟองใช้เพื่อวาดแผนภูมิแบบฟอง ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิแบบฟองต่อไปนี้

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	ฟองพื้นฐาน แผนภูมิฟองพื้นฐาน
2	แผนภูมิฟองพร้อมป้ายกำกับข้อมูล แผนภูมิฟองพร้อมป้ายกำกับข้อมูล

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

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	เชิงเทียนพื้นฐาน แผนภูมิแท่งเทียนพื้นฐาน
2	เชิงเทียนพร้อมสีที่กำหนดเอง แผนภูมิแท่งเทียนที่กำหนดเอง

แผนภูมิ Colummn ใช้ในการวาดแผนภูมิตาม colummn ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตาม colummn ต่อไปนี้

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	คอลัมน์พื้นฐาน แผนภูมิ colummn พื้นฐาน
2	แผนภูมิคอลัมน์ที่จัดกลุ่ม แผนภูมิ Colummn ที่จัดกลุ่ม
3	คอลัมน์แบบเรียงซ้อน แผนภูมิ Colummn ที่มี colummn ซ้อนทับกัน
4	คอลัมน์ที่ซ้อนกันเชิงลบ แผนภูมิ Colummn พร้อมกองลบ
5	แผนภูมิคอลัมน์ที่แตกต่างกัน แผนภูมิ Colummn แสดงความแตกต่าง

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

เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมิในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Googleแล้ว ตอนนี้ให้เราดูตัวอย่างของแผนภูมิคอลัมน์ที่แสดงความแตกต่าง

การกำหนดค่า

เราเคยใช้ ComboChart คลาสเพื่อแสดง Combination Chart

// Combination chart
ComboChart chart = new ComboChart();

ตัวอย่าง

HelloWorld.java

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.ComboChart;
import com.googlecode.gwt.charts.client.corechart.ComboChartOptions;
import com.googlecode.gwt.charts.client.corechart.ComboChartSeries;
import com.googlecode.gwt.charts.client.options.HAxis;
import com.googlecode.gwt.charts.client.options.SeriesType;
import com.googlecode.gwt.charts.client.options.VAxis;

public class HelloWorld implements EntryPoint {
   private ComboChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new ComboChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.STRING, "Fruits");
      data.addColumn(ColumnType.NUMBER, "Jane");
      data.addColumn(ColumnType.NUMBER, "Jone");
      data.addColumn(ColumnType.NUMBER, "Average");
      
      data.addRow("Apples", 3, 2, 2.5);
      data.addRow("Oranges",2, 3, 2.5);
      data.addRow("Pears", 1, 5, 3);
      data.addRow("Bananas", 3, 9, 6);    		
      data.addRow("Plums", 4, 2, 3);    
      
      // Set options
      ComboChartOptions options = ComboChartOptions.create();
      options.setTitle("Fruits distribution");
      options.setHAxis(HAxis.create("Person"));
      options.setVAxis(VAxis.create("Fruits"));
      options.setSeriesType(SeriesType.BARS);

      ComboChartSeries lineSeries = ComboChartSeries.create();
      lineSeries.setType(SeriesType.LINE);
      options.setSeries(2,lineSeries);

      // Draw the chart
      chart.draw(data,options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

ผลลัพธ์

ตรวจสอบผลลัพธ์

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

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	ฮิสโตแกรมพื้นฐาน แผนภูมิฮิสโตแกรมพื้นฐาน
2	การควบคุมสี สีที่กำหนดเองของแผนภูมิ Histrogram
3	การควบคุมที่เก็บข้อมูล ถังที่กำหนดเองของแผนภูมิ Histrogram
4	หลายซีรีส์ แผนภูมิ Histrogram มีหลายชุด

แผนภูมิเส้นใช้เพื่อวาดแผนภูมิตามเส้น ในส่วนนี้เราจะพูดถึงประเภทของแผนภูมิตามเส้นต่อไปนี้

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	เส้นพื้นฐาน แผนภูมิเส้นพื้นฐาน
2	มีจุดที่มองเห็นได้ แผนภูมิที่มีจุดข้อมูลที่มองเห็นได้
3	สีพื้นหลังที่ปรับแต่งได้ แผนภูมิด้วยสีพื้นหลังที่กำหนดเอง
4	สีของเส้นที่ปรับแต่งได้ แผนภูมิด้วยสีเส้นที่กำหนดเอง
5	แกนที่ปรับแต่งได้และป้ายกำกับ จัดทำแผนภูมิด้วยแกนที่กำหนดเองและป้ายกำกับ
6	กากบาท แผนภูมิเส้นแสดงกากบาทที่จุดข้อมูลบนการเลือก
7	สไตล์เส้นที่ปรับแต่งได้ แผนภูมิด้วยสีเส้นที่กำหนดเอง
8	แผนภูมิเส้นที่มีเส้นโค้ง แผนภูมิด้วยเส้นโค้งเรียบ

Google Map Chart ใช้ Google Maps API เพื่อแสดงแผนที่ ค่าข้อมูลจะแสดงเป็นเครื่องหมายบนแผนที่ ค่าข้อมูลอาจเป็นพิกัด (คู่ละยาว) หรือแอดเดรสจริง แผนที่จะถูกปรับขนาดตามเพื่อให้รวมจุดที่ระบุไว้ทั้งหมด

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	แผนที่พื้นฐาน แผนที่ Google พื้นฐาน
2	แผนที่โดยใช้ละติจูด / ลองจิจูด แผนที่ที่มีการระบุตำแหน่งโดยใช้ละติจูดและลองจิจูด

ต่อไปนี้เป็นตัวอย่างแผนผังองค์กร

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

การกำหนดค่า

เราเคยใช้ OrgChart คลาสเพื่อแสดงแผนผังองค์กร

// Organization chart
OrgChart chart = new OrgChart();

ตัวอย่าง

HelloWorld.java

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.format.PatternFormat;
import com.googlecode.gwt.charts.client.orgchart.OrgChart;
import com.googlecode.gwt.charts.client.orgchart.OrgChartOptions;

public class HelloWorld implements EntryPoint {
   private OrgChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.ORGCHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new OrgChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable dataTable = DataTable.create();
      dataTable.addColumn(ColumnType.STRING, "Name");
      dataTable.addColumn(ColumnType.STRING, "Manager");
      dataTable.addColumn(ColumnType.STRING, "ToolTip");
      dataTable.addRows(5);

      dataTable.setValue(0, 0, "Mike");
      dataTable.setValue(0, 1, "");
      dataTable.setValue(0, 2, "The President");
      dataTable.setValue(1, 0, "Jim");
      dataTable.setValue(1, 1, "Mike");
      dataTable.setValue(1, 2, "VP");
      dataTable.setValue(2, 0, "Alice");
      dataTable.setValue(2, 1, "Mike");
      dataTable.setValue(2, 2, "");
      dataTable.setValue(3, 0, "Bob");
      dataTable.setValue(3, 1, "Jim");
      dataTable.setValue(3, 2, "Bob Sponge");
      dataTable.setValue(4, 0, "Carol");
      dataTable.setValue(4, 1, "Bob");
      dataTable.setValue(4, 2, "");

      PatternFormat format = PatternFormat.create("{0} {1}");
      format.format(dataTable, 0, 2);

      // Set options
      OrgChartOptions options = OrgChartOptions.create();
      options.setAllowHtml(true);

      // Draw the chart
      chart.draw(dataTable, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

ผลลัพธ์

ตรวจสอบผลลัพธ์

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

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	พายพื้นฐาน แผนภูมิวงกลมพื้นฐาน
2	แผนภูมิโดนัท แผนภูมิโดนัท.
3	แผนภูมิวงกลม 3 มิติ แผนภูมิวงกลม 3 มิติ
4	แผนภูมิวงกลมที่มีชิ้นส่วนระเบิด แผนภูมิวงกลมที่มีชิ้นส่วนระเบิด

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

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	แผนภูมิ Sankey พื้นฐาน แผนภูมิ Sankey พื้นฐาน
2	แผนภูมิ Sankey หลายระดับ แผนภูมิ Sankey หลายระดับ
3	การปรับแต่งแผนภูมิ Sankey แผนภูมิ Sankey ที่กำหนดเอง

ต่อไปนี้เป็นตัวอย่างของแผนภูมิกระจาย

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

การกำหนดค่า

เราเคยใช้ ScatterChart คลาสเพื่อแสดงแผนภูมิกระจาย

ScatterChart chart = new ScatterChart();

ตัวอย่าง

HelloWorld.java

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.corechart.ScatterChart;
import com.googlecode.gwt.charts.client.corechart.ScatterChartOptions;

public class HelloWorld implements EntryPoint {
   private ScatterChart chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.CORECHART);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new ScatterChart();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable data = DataTable.create();
      data.addColumn(ColumnType.NUMBER, "Age");
      data.addColumn(ColumnType.NUMBER, "Weight");

      data.addRow(8,12);
      data.addRow(4, 5.5);
      data.addRow(11,14);
      data.addRow(4,5);
      data.addRow(3,3.5);
      data.addRow(6.5,7);

      ScatterChartOptions options  = ScatterChartOptions.create();
      options.setTitle("Age vs Weight");
      options.setLegend(null);
      
      // Draw the chart
      chart.draw(data, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

ผลลัพธ์

ตรวจสอบผลลัพธ์

แผนภูมิพื้นที่แบบขั้นบันไดคือแผนภูมิพื้นที่แบบขั้นบันได เราจะพูดถึงประเภทของแผนภูมิพื้นที่แบบขั้นบันไดต่อไปนี้

เลขที่	ประเภทแผนภูมิ / คำอธิบาย
1	แผนภูมิขั้นพื้นฐาน แผนภูมิพื้นที่ขั้นพื้นฐาน
2	แผนภูมิขั้นตอนที่ซ้อนกัน แผนภูมิพื้นที่ขั้นบันไดแบบเรียงซ้อน

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

เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมิในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Googleแล้ว ตอนนี้ให้เราดูตัวอย่างของแผนภูมิตาราง

การกำหนดค่า

เราเคยใช้ Table คลาสเพื่อแสดงแผนภูมิตาราง

Table chart = new Chart();

ตัวอย่าง

HelloWorld.java

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.table.Table;
import com.googlecode.gwt.charts.client.table.TableOptions;

public class HelloWorld implements EntryPoint {
   private Table chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.TABLE);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new Table();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable dataTable = DataTable.create();
      dataTable.addColumn(ColumnType.STRING, "Name");
      dataTable.addColumn(ColumnType.NUMBER, "Salary");
      dataTable.addColumn(ColumnType.BOOLEAN, "Full Time Employee");
      dataTable.addRows(4);
      
      dataTable.setCell(0, 0, "Mike");
      dataTable.setCell(0, 1, 10000, "$10,000");
      dataTable.setCell(0, 2, true);
      dataTable.setCell(1, 0, "Jim");
      dataTable.setCell(1, 1, 8000, "$8,000");
      dataTable.setCell(1, 2, false);
      dataTable.setCell(2, 0, "Alice");
      dataTable.setCell(2, 1, 12500, "$12,500");
      dataTable.setCell(2, 2, true);
      dataTable.setCell(3, 0, "Bob");
      dataTable.setCell(3, 1, 7000, "$7,000");
      dataTable.setCell(3, 2, true);

      TableOptions options  = TableOptions.create();
      options.setAlternatingRowStyle(true);
      options.setShowRowNumber(true);
      
      // Draw the chart
      chart.draw(dataTable, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

ผลลัพธ์

ตรวจสอบผลลัพธ์

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

เราได้เห็นการกำหนดค่าที่ใช้ในการวาดแผนภูมิในบทไวยากรณ์การกำหนดค่าแผนภูมิของ Googleแล้ว ตอนนี้ให้เราดูตัวอย่างแผนภูมิ TreeMap

การกำหนดค่า

เราเคยใช้ TreeMap คลาสเพื่อแสดงแผนภูมิ TreeMap

TreeMap chart = new TreeMap();

ตัวอย่าง

HelloWorld.java

package com.tutorialspoint.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.RootPanel;

import com.googlecode.gwt.charts.client.ChartLoader;
import com.googlecode.gwt.charts.client.ChartPackage;
import com.googlecode.gwt.charts.client.ColumnType;
import com.googlecode.gwt.charts.client.DataTable;
import com.googlecode.gwt.charts.client.treemap.TreeMap;
import com.googlecode.gwt.charts.client.treemap.TreeMapOptions;

public class HelloWorld implements EntryPoint {
   private TreeMap chart;

   private void initialize() {
      ChartLoader chartLoader = new ChartLoader(ChartPackage.TREEMAP);
      chartLoader.loadApi(new Runnable() {
         public void run() {
            // Create and attach the chart
            chart = new TreeMap();
            RootPanel.get().add(chart);
            draw();
         }
      });
   }
   private void draw() {
      // Prepare the data
      DataTable dataTable = DataTable.create();
      dataTable.addColumn(ColumnType.STRING, "Location");
      dataTable.addColumn(ColumnType.STRING, "Parent");
      dataTable.addColumn(ColumnType.NUMBER, "Market trade volume (size)");
      dataTable.addColumn(ColumnType.NUMBER, "Market increase/decrease (color)");

      dataTable.addRow("Global",null,0,0);
      dataTable.addRow("America","Global",0,0);
      dataTable.addRow("Europe","Global",0,0);
      dataTable.addRow("Asia","Global",0,0);
      dataTable.addRow("Australia","Global",0,0);
      dataTable.addRow("Africa","Global",0,0);  

      dataTable.addRow("USA","America",52,31);
      dataTable.addRow("Mexico","America",24,12);
      dataTable.addRow("Canada","America",16,-23);

      dataTable.addRow("France","Europe",42,-11);
      dataTable.addRow("Germany","Europe",31,-2);
      dataTable.addRow("Sweden","Europe",22,-13);   

      dataTable.addRow("China","Asia",36,4);
      dataTable.addRow("Japan","Asia",20,-12);
      dataTable.addRow("India","Asia",40,63);

      dataTable.addRow("Egypt","Africa",21,0); 
      dataTable.addRow("Congo","Africa",10,12);
      dataTable.addRow("Zaire","Africa",8,10);

      // Set options
      TreeMapOptions options = TreeMapOptions.create();
      options.setMinColor("#ff7777");
      options.setMidColor("#ffff77");
      options.setMaxColor("#77ff77");
      options.setHeaderHeight(15);
      options.setShowScale(true);
      
      // Draw the chart
      chart.draw(dataTable, options);
      chart.setWidth("400px");
      chart.setHeight("400px");
   }
   public void onModuleLoad() {
      initialize();
   }
}

ผลลัพธ์

ตรวจสอบผลลัพธ์