Google Data Studio ช่วยให้ผู้ใช้สร้างแดชบอร์ดแบบอินเทอร์แอกทีฟที่อัปเดตแบบเรียลไทม์พร้อมการแสดงข้อมูลผ่านภาพที่สวยงามได้ฟรี ผู้ใช้สามารถดึงข้อมูลจากแหล่งที่มาต่างๆ และสร้างรายงานใน Data Studio ได้ โดยมีสิทธิ์แก้ไขและแชร์อย่างเต็มรูปแบบ ตัวอย่างแดชบอร์ด Data Studio มีดังนี้
(คลิกที่นี่เพื่อดูรายงานตัวอย่างนี้ใน Data Studio)
Data Studio มีแผนภูมิในตัวหลายประเภท ได้แก่ แผนภูมิเส้น แผนภูมิแท่ง แผนภูมิวงกลม และแผนภูมิกระจาย การแสดงภาพข้อมูลจากชุมชนช่วยให้คุณสร้างและใช้การแสดงภาพ JavaScript ที่กำหนดเองใน Data Studio ได้ การแสดงภาพข้อมูลจากชุมชนสร้างขึ้นโดยชุมชนนักพัฒนาซอฟต์แวร์ Data Studio ซึ่งนักพัฒนาซอฟต์แวร์ทุกคนสามารถสร้างการแสดงภาพข้อมูลจากชุมชนได้ นอกจากนี้ คุณยังแชร์การแสดงข้อมูลแบบชุมชนกับผู้อื่นเพื่อให้ผู้อื่นใช้การแสดงข้อมูลดังกล่าวกับข้อมูลของตนเองได้ด้วย
สิ่งที่คุณจะได้เรียนรู้
ในโค้ดแล็บนี้ คุณจะได้เรียนรู้สิ่งต่อไปนี้
- วิธีการทำงานของการแสดงภาพข้อมูลจากชุมชนของ Google Data Studio
- วิธีสร้างการแสดงภาพข้อมูลจากชุมชนโดยใช้ไลบรารีตัวช่วย ds-component
- วิธีผสานรวมการแสดงภาพข้อมูลจากชุมชนเข้ากับแดชบอร์ด Data Studio
สิ่งที่คุณต้องมี
คุณต้องมีสิ่งต่อไปนี้จึงจะทำโค้ดแล็บนี้ให้เสร็จสมบูรณ์ได้
- การเข้าถึงอินเทอร์เน็ตและเว็บเบราว์เซอร์
- บัญชี Google
- สิทธิ์เข้าถึงที่เก็บข้อมูล Google Cloud Platform
- คุ้นเคยกับ JavaScript
ทำไมคุณถึงเลือก Codelab นี้
คุณวางแผนที่จะใช้ Codelab/บทแนะนำนี้อย่างไร
คุณจะให้คะแนนประสบการณ์การใช้งาน Data Studio เท่าใด
ข้อใดอธิบายถึงพื้นฐานของคุณได้ดีที่สุด
คุณสนใจไลบรารีการแสดงภาพ JavaScript ใด
ไปยังหน้าถัดไปเพื่อส่งข้อมูลแบบสำรวจ
การแสดงภาพข้อมูลจากชุมชนของ Data Studio ช่วยให้คุณสร้างและใช้การแสดงภาพ JavaScript ที่กำหนดเองซึ่งผสานรวมเข้ากับแดชบอร์ดได้
ในโค้ดแล็บนี้ คุณจะได้สร้างการแสดงภาพชุมชนแบบแผนภูมิแท่งที่รองรับมิติข้อมูล 1 รายการ เมตริก 1 รายการ และรูปแบบสีของแท่ง
หากต้องการสร้างการแสดงข้อมูลแบบกำหนดเอง คุณต้องมีไฟล์ต่อไปนี้ในที่เก็บข้อมูล Google Cloud Platform ซึ่งคุณจะสร้างในขั้นตอนถัดไป
ชื่อไฟล์ | ประเภทไฟล์ | วัตถุประสงค์ |
manifest.json* | JSON | ระบุข้อมูลเมตาเกี่ยวกับการแสดงภาพและตำแหน่งของทรัพยากรอื่นๆ |
myViz.json | JSON | ระบุตัวเลือกการกำหนดค่าข้อมูลและสําหรับแผงพร็อพเพอร์ตี้ |
myViz.js | JavaScript | ระบุโค้ด JavaScript ที่จำเป็นสำหรับการแสดงภาพ |
myViz.css (ไม่บังคับ) | CSS | จัดรูปแบบการแสดงภาพ |
*Manifest เป็นไฟล์เดียวที่มีชื่อที่ต้องระบุ ส่วนไฟล์อื่นๆ สามารถตั้งชื่อแตกต่างกันได้ ตราบใดที่ระบุชื่อ/ตำแหน่งไว้ในไฟล์ Manifest
ในส่วนนี้ คุณจะเพิ่มโค้ดที่จำเป็นในการจัดการข้อมูล การเปลี่ยนแปลงสไตล์ และการแสดงภาพลงในไฟล์ JavaScript
เขียนแหล่งที่มาของการแสดงภาพ
ขั้นตอนที่ 1: ดาวน์โหลดไฟล์ dscc.min.js จากคลังคอมโพเนนต์ชุมชนของ Data Studio แล้วคัดลอกไปยังไดเรกทอรีการทำงาน
ขั้นตอนที่ 2: คัดลอกโค้ดต่อไปนี้ลงในเครื่องมือแก้ไขข้อความและบันทึกเป็น myVizSource.js ในไดเรกทอรีการทำงานในเครื่อง
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = 'blue';
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });เตรียมไฟล์ JavaScript สุดท้าย
ขั้นตอนที่ 3: รวม JavaScript ทั้งหมดที่จำเป็นไว้ในไฟล์เดียวโดยคัดลอกเนื้อหาของไลบรารีตัวช่วยการแสดงภาพ (dscc.min.js) และไฟล์ myVizSource.js ของคุณลงในไฟล์ใหม่ชื่อ myViz.js เรียกใช้คำสั่งต่อไปนี้เพื่อต่อไฟล์ ทำขั้นตอนนี้ซ้ำทุกครั้งที่อัปเดตโค้ดภาพ
สคริปต์การต่อกันของ Linux/Mac OS
cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.jsสคริปต์ Windows
del myViz.js
type nul > myViz.js
type dscc.min.js >> myViz.js
echo.>> myViz.js
type myVizSource.js >> myViz.jsไฟล์ CSS จะกำหนดสไตล์สำหรับการแสดงภาพ คัดลอกโค้ดต่อไปนี้และบันทึกเป็น myViz.css.
myViz.css
#myVizTitle {
color: black;
font-size: 24px;
text-align: center;
margin: 0 auto;
}ไฟล์ JSON ของการกำหนดค่าการแสดงภาพจะกำหนดแอตทริบิวต์ข้อมูลและสไตล์ที่การแสดงภาพรองรับและกำหนดให้ใช้ การแสดงภาพที่คุณจะสร้างในโค้ดแล็บนี้รองรับมิติข้อมูล 1 รายการและเมตริก 1 รายการ และต้องมีองค์ประกอบรูปแบบ 1 รายการเพื่อเลือกสี ดูข้อมูลเพิ่มเติมเกี่ยวกับมิติข้อมูลและเมตริก
คัดลอกโค้ดต่อไปนี้และบันทึกเป็น myViz.json.หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับพร็อพเพอร์ตี้ที่คุณกําหนดค่าได้ โปรดไปที่เอกสารประกอบข้อมูลอ้างอิงการกําหนดค่า
myViz.json
{
"data": [
{
"id": "concepts",
"label": "Concepts",
"elements": [
{
"id": "barDimension",
"label": "Dimension",
"type": "DIMENSION",
"options": {
"min": 1,
"max": 1
}
},
{
"id": "barMetric",
"label": "Metric",
"type": "METRIC",
"options": {
"min": 1,
"max": 1
}
}
]
}
],
"style": [
{
"id": "color",
"label": "Colors",
"elements": [
{
"type": "FONT_COLOR",
"id": "barColor",
"label": "Bar Color",
"defaultValue": "black"
}
]
}
]
}ขั้นตอนที่ 1: สร้างโปรเจ็กต์ Google Cloud Platform (GCP)
ขั้นตอนที่ 2: สร้างที่เก็บข้อมูล GCP คลาสพื้นที่เก็บข้อมูลที่แนะนำคือระดับภูมิภาค ดูรายละเอียดเกี่ยวกับระดับฟรีได้ที่ราคาของ Cloud Storage เป็นไปได้ยากที่พื้นที่เก็บข้อมูลภาพจะทำให้เกิดค่าใช้จ่ายสำหรับคลาสที่เก็บข้อมูลระดับภูมิภาค
ขั้นตอนที่ 3: จดชื่อ/เส้นทางของที่เก็บข้อมูล โดยเริ่มจากส่วนหลัง Buckets/ Data Studio เรียกสิ่งนี้ว่า "รหัสคอมโพเนนต์" และจะใช้เพื่อระบุและติดตั้งใช้งาน
ไฟล์ Manifest จะให้ข้อมูลเกี่ยวกับตำแหน่งและการแสดงภาพ รวมถึงทรัพยากร โดยต้องตั้งชื่อว่า "manifest.json" และต้องอยู่ในที่เก็บข้อมูลที่สร้างขึ้นในขั้นตอนก่อนหน้า (ที่เก็บข้อมูลเดียวกับที่ใช้สำหรับรหัสคอมโพเนนต์)
คัดลอกโค้ดต่อไปนี้ลงในเครื่องมือแก้ไขข้อความและบันทึกเป็น manifest.json.
ดูข้อมูลเพิ่มเติมเกี่ยวกับไฟล์ Manifest ได้ที่เอกสารประกอบข้อมูลอ้างอิงของไฟล์ Manifest
manifest.json
{
"name": "Community Visualization",
"logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"organization": "Data Studio Codelab",
"supportUrl": "https://url",
"packageUrl": "https://url",
"privacyPolicyUrl": "https://url",
"description": "Community Visualization Codelab",
"devMode": true,
"components": [{
"id": "barChart",
"name": "Bar Chart",
"iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/bar_chart.png",
"description": "Bar chart written in d3.js",
"resource": {
"js": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.js",
"config": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.json",
"css": "MY_GOOGLE_CLOUD_STORAGE_BUCKET/myViz.css"
}
}]
}
- อัปโหลดไฟล์
manifest.json,myViz.js,myViz.jsonและmyViz.cssไปยังที่เก็บข้อมูล Google Cloud Storage โดยใช้อินเทอร์เฟซเว็บหรือเครื่องมือบรรทัดคำสั่ง gsutil ทำซ้ำขั้นตอนนี้ทุกครั้งที่คุณอัปเดตภาพ
คำสั่งอัปโหลด gsutil
gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read myViz.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKETขั้นตอนที่ 1: คัดลอก URL สำหรับชุดข้อมูลตัวอย่างของการแสดงข้อมูลแบบชุมชน
ขั้นตอนที่ 2: ไปที่ Data Studio แล้วคลิกว่างในส่วนเริ่มรายงานใหม่
ขั้นตอนที่ 3: คลิกสร้างแหล่งข้อมูลใหม่ที่ด้านขวาล่าง
ขั้นตอนที่ 4: เลือกตัวเชื่อมต่อ Google ชีต
ขั้นตอนที่ 5: ในช่อง URL ให้ป้อน URL ของชีตใน Google ชีตจากขั้นตอนที่ 1 ด้านบน
ขั้นตอนที่ 6: คลิกเชื่อมต่อที่ด้านขวาบนของหน้า
ขั้นตอนที่ 7: ในส่วนหัวของแหล่งข้อมูล ให้คลิกการเข้าถึงการแสดงภาพข้อมูลจากชุมชน เลือกเปิด แล้วคลิกบันทึก
ขั้นตอนที่ 7: คลิกเพิ่มลงในรายงานในช่องที่ปรากฏขึ้นเพื่อเพิ่มแหล่งข้อมูลลงในรายงาน
ขั้นตอนที่ 6: คลิกปุ่มภาพข้อมูลชุมชน 
ในแถบเครื่องมือ ซึ่งจะเป็นการเปิดเมนูแบบเลื่อนลง
ขั้นตอนที่ 7: วางชื่อที่เก็บข้อมูลโดยมีคำนำหน้าเป็น gs:// ( เช่น gs://community-viz-docs/myViz) ลงในช่องป้อนข้อความสำหรับ "เส้นทาง Manifest" เพิ่ม barChart ในส่วน "รหัสคอมโพเนนต์" แล้วคลิก "เพิ่ม" 
ระบบจะวาดภาพข้อมูลของคุณบน Canvas โดยอัตโนมัติ แผงพร็อพเพอร์ตี้ทางด้านขวาควรแสดงองค์ประกอบในไฟล์ myViz.json
การแสดงภาพรองรับมิติข้อมูล 1 รายการและเมตริก 1 รายการ
มีการระบุองค์ประกอบรูปแบบ 1 รายการ ซึ่งแสดงเครื่องมือเลือกสีแบบอักษรที่มีป้ายกำกับว่า "สีแถบ" ในขั้นตอนถัดไป คุณจะใช้ตัวเลือกนี้เพื่อส่งผลต่อการแสดงภาพ
ในส่วนนี้ คุณจะใช้องค์ประกอบรูปแบบตัวเลือกสีเพื่ออัปเดตภาพข้อมูล
ขั้นตอนที่ 1: แทนที่โค้ดในไฟล์ myVizSource.js ด้วยโค้ดด้านล่าง
myVizSource.js
function drawViz(data) {
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute('width', `${width/2}px`);
rect.setAttribute('height', `${height/2}px`);
rect.style.fill = fillColor;
svg.append(rect);
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });ขั้นตอนที่ 2: สร้างไฟล์ JavaScript ที่รวมกัน แล้วอัปโหลดไฟล์ภาพอีกครั้งไปยัง Google Cloud Storage
ขั้นตอนที่ 3: รีเฟรชรายงาน Data Studio ที่คุณทดสอบการแสดงภาพข้อมูลจากชุมชน
คุณควรเปลี่ยนสีของสี่เหลี่ยมผืนผ้าได้โดยใช้ตัวเลือกในเมนูรูปแบบ
ในส่วนนี้ คุณจะอัปเดตการแสดงภาพเพื่อวาดแผนภูมิแท่งโดยใช้ข้อมูลจากชุดข้อมูลตัวอย่างการแสดงภาพข้อมูลจากชุมชน หมายเหตุ: Data Studio จะแสดงข้อมูลสูงสุด 2,500 แถวในการแสดงข้อมูลเป็นภาพ
ขั้นตอนที่ 1: แทนที่โค้ดในไฟล์ myVizSource.js ด้วยโค้ดด้านล่าง
myVizSource.js
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function(row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function(row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
}
// subscribe to data and style changes
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });ขั้นตอนที่ 2: สร้างไฟล์ JavaScript ที่รวมกัน แล้วอัปโหลดไฟล์ภาพอีกครั้งไปยัง Google Cloud Storage
ขั้นตอนที่ 3: รีเฟรชรายงาน Data Studio ที่คุณทดสอบการแสดงภาพข้อมูลจากชุมชน คุณควรมีแผนภูมิแท่งที่มีป้ายกำกับซึ่งสร้างจากข้อมูลใน Google ชีต หากต้องการเปลี่ยนสีของแถบ ให้เปลี่ยนสีที่เลือกในตัวเลือก"สีของแถบ" ในรูปแบบ
ในส่วนนี้ คุณจะอัปเดตการแสดงภาพเพื่อวาดแผนภูมิแท่งโดยใช้ข้อมูลจากชุดข้อมูลตัวอย่างการแสดงภาพข้อมูลจากชุมชน
ขั้นตอนที่ 1: แทนที่โค้ดในไฟล์ myVizSource.js ด้วยโค้ดด้านล่าง
myVizSource.js
// create a title element
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);
function drawViz(data) {
let rowData = data.tables.DEFAULT;
// set margins + canvas size
const margin = { top: 10, bottom: 50, right: 10, left: 10 };
const padding = { top: 15, bottom: 15 };
const height = dscc.getHeight() - margin.top - margin.bottom;
const width = dscc.getWidth() - margin.left - margin.right;
const fillColor = data.style.barColor.value
? data.style.barColor.value.color
: data.style.barColor.defaultValue;
// remove the svg if it already exists
if (document.querySelector("svg")) {
let oldSvg = document.querySelector("svg");
oldSvg.parentNode.removeChild(oldSvg);
}
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("height", `${height}px`);
svg.setAttribute("width", `${width}px`);
const maxBarHeight = height - padding.top - padding.bottom;
const barWidth = width / (rowData.length * 2);
// obtain the maximum bar metric value for scaling purposes
let largestMetric = 0;
rowData.forEach(function (row) {
largestMetric = Math.max(largestMetric, row["barMetric"][0]);
});
rowData.forEach(function (row, i) {
// 'barDimension' and 'barMetric' come from the id defined in myViz.json
// 'dimId' is Data Studio's unique field ID, used for the filter interaction
const barData = {
dim: row["barDimension"][0],
met: row["barMetric"][0],
dimId: data.fields["barDimension"][0].id
};
// calculates the height of the bar using the row value, maximum bar
// height, and the maximum metric value calculated earlier
let barHeight = Math.round((barData["met"] * maxBarHeight) / largestMetric);
// normalizes the x coordinate of the bar based on the width of the convas
// and the width of the bar
let barX = (width / rowData.length) * i + barWidth / 2;
// create the "bar"
let rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttribute("x", barX);
rect.setAttribute("y", maxBarHeight - barHeight);
rect.setAttribute("width", barWidth);
rect.setAttribute("height", barHeight);
rect.setAttribute("data", JSON.stringify(barData));
// use style selector from Data Studio
rect.style.fill = fillColor;
svg.appendChild(rect);
// add text labels
let text = document.createElementNS("http://www.w3.org/2000/svg", "text");
let textX = barX + barWidth / 2;
text.setAttribute("x", textX);
text.setAttribute("text-anchor", "middle");
let textY = maxBarHeight + padding.top;
text.setAttribute("y", textY);
text.setAttribute("fill", fillColor)
text.innerHTML = barData["dim"];
svg.appendChild(text);
});
document.body.appendChild(svg);
// Get the human-readable name of the metric and dimension
var metricName = data.fields['barMetric'][0].name;
var dimensionName = data.fields['barDimension'][0].name;
titleElement.innerText = metricName + ' by ' + dimensionName;
}
dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });ขั้นตอนที่ 2: สร้างไฟล์ JavaScript ที่รวมกัน แล้วอัปโหลดไฟล์ภาพอีกครั้งไปยัง Google Cloud Storage
ขั้นตอนที่ 3: รีเฟรชรายงาน Data Studio ที่คุณทดสอบการแสดงภาพข้อมูลจากชุมชน คุณควรมีแผนภูมิแท่งที่มีชื่อที่สร้างจากข้อมูลและจัดรูปแบบโดยใช้ไฟล์ myViz.css
ขอแสดงความยินดี คุณได้สร้างการแสดงภาพข้อมูลจากชุมชนใน Data Studio แล้ว ซึ่งจะนำคุณไปสู่ตอนท้ายของโค้ดแล็บนี้ ตอนนี้มาดูกันว่าคุณจะทำอะไรต่อไปได้บ้าง
ขยายการแสดงภาพ
- เพิ่มการโต้ตอบลงในการแสดงภาพ
- ดูวิธีพัฒนาภาพข้อมูลแบบโลคัล
- ดูข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบรูปแบบที่มีและเพิ่มการจัดรูปแบบเพิ่มเติมลงในการแสดงภาพ
ทำสิ่งต่างๆ ได้มากขึ้นด้วยการแสดงภาพข้อมูลจากชุมชน
- ดูข้อมูลอ้างอิงสำหรับไลบรารีตัวช่วย dscc, ไฟล์ Manifest และไฟล์การกำหนดค่า
- ส่งการแสดงภาพข้อมูลของคุณไปยังการแสดงการแสดงภาพข้อมูลจากชุมชน
- สร้างเครื่องมือเชื่อมต่อชุมชน สำหรับ Data Studio
แหล่งข้อมูลเพิ่มเติม
ด้านล่างนี้คือแหล่งข้อมูลต่างๆ ที่คุณเข้าถึงได้เพื่อช่วยให้คุณเจาะลึกเนื้อหาที่ครอบคลุมใน Codelab นี้
ประเภททรัพยากร | ฟีเจอร์สำหรับผู้ใช้ | ฟีเจอร์สำหรับนักพัฒนาแอป |
เอกสารประกอบ | ||
ข่าวสารและข้อมูลอัปเดต | ลงชื่อสมัครใช้ใน Data Studio > การตั้งค่าผู้ใช้ | |
ถามคำถาม | ||
วิดีโอ | ฟีเจอร์ที่จะมีให้บริการเร็วๆ นี้ | |
ตัวอย่าง |