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 นี้
คุณวางแผนจะใช้โค้ดห้องทดลอง/บทแนะนํานี้อย่างไร
คุณจะให้คะแนนประสบการณ์การใช้งาน Data Studio อย่างไร
พื้นหลังแบบใดอธิบายได้ดีที่สุด
คุณสนใจไลบรารีภาพ JavaScript ใด
ไปที่หน้าถัดไปเพื่อส่งข้อมูลแบบสํารวจ
การแสดงภาพข้อมูลจากชุมชนของ Data Studio ช่วยให้คุณสร้างและใช้การแสดงภาพ JavaScript ที่กําหนดเองซึ่งผสานรวมกับหน้าแดชบอร์ดได้
ใน Codelab นี้ คุณจะสร้างการแสดงภาพข้อมูลแผนภูมิแท่งได้ 1 ขนาด 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 config config ของการแสดงภาพจะระบุแอตทริบิวต์ข้อมูลและสไตล์ที่รองรับและจําเป็นสําหรับการแสดงภาพของคุณ การแสดงภาพที่คุณจะสร้างใน Codelab นี้รองรับมิติข้อมูล 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: สังเกตชื่อ/เส้นทางของที่เก็บข้อมูล โดยขึ้นต้นด้วยส่วนหลังที่เก็บข้อมูล/ Data Studio เรียกรหัสนี้ว่า ""component ID" และระบบจะใช้เพื่อระบุและทําให้ใช้งานได้
ไฟล์ 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 Path" เพิ่ม barChart ในส่วน "Component ID&&tt; แล้วคลิก "ADD"
การแสดงภาพจะวาดบนผืนผ้าใบโดยอัตโนมัติ แผงคุณสมบัติทางด้านขวาควรสอดคล้องกับองค์ประกอบในไฟล์ myViz.json
การแสดงภาพอนุญาตมิติข้อมูล 1 รายการและเมตริก 1 รายการ
ระบุองค์ประกอบสไตล์แล้ว 1 รายการ - แสดงตัวเลือกสีแบบอักษรที่ติดป้ายกํากับ "Bar Color." ในขั้นตอนถัดไป คุณจะใช้ตัวเลือกนี้เพื่อสร้างภาพ
ในส่วนนี้ คุณจะใช้องค์ประกอบรูปแบบตัวเลือกสีเพื่ออัปเดตการแสดงภาพ
ขั้นตอนที่ 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 ชีต หากต้องการเปลี่ยนสีของแถบ ให้เปลี่ยนสีที่เลือกในตัวเลือกรูปแบบ "Bar Color"
ในส่วนนี้ คุณจะอัปเดตการแสดงภาพเพื่อวาดแผนภูมิแท่งโดยใช้ข้อมูลจากชุดข้อมูลตัวอย่างการแสดงภาพข้อมูลของชุมชน
ขั้นตอนที่ 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 แล้ว ซึ่งจะนําคุณไปที่จุดสิ้นสุดของ Codelab ต่อไป มาดูขั้นตอนถัดไปที่คุณจะทําได้
ขยายการแสดงภาพ
- เพิ่มการโต้ตอบกับการแสดงภาพ
- ดูวิธีพัฒนาการแสดงภาพในเครื่อง
- ดูข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบของรูปแบบที่ใช้ได้และเพิ่มการจัดรูปแบบเพิ่มเติมให้กับการแสดงภาพ
ทําสิ่งต่างๆ ได้มากขึ้นด้วยการแสดงภาพข้อมูลจากชุมชน
- ตรวจสอบข้อมูลอ้างอิงสําหรับไลบรารีความช่วยเหลือสําหรับ dscc, ไฟล์ Manifest และไฟล์การกําหนดค่า
- ส่งการแสดงภาพไปที่ Showcase Image Community
- สร้างเครื่องมือเชื่อมต่อชุมชนสําหรับ Data Studio
แหล่งข้อมูลเพิ่มเติม
ด้านล่างนี้คือแหล่งข้อมูลต่างๆ ที่คุณเข้าถึงได้ เพื่อเจาะลึกเนื้อหาที่กล่าวถึงใน Codelab นี้
ประเภททรัพยากร | ฟีเจอร์ผู้ใช้ | ฟีเจอร์สําหรับนักพัฒนาแอป |
เอกสารประกอบ | ||
News การอัปเดต | ลงชื่อสมัครใช้ใน Data Studio > การตั้งค่าผู้ใช้ | |
ถามคําถาม | ||
วิดีโอ | พบกันเร็วๆ นี้ | |
ตัวอย่าง |