สร้างการแสดงภาพข้อมูลจากชุมชน Data Studio ด้วย dscc-gen

1. บทนำ

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

สิ่งที่คุณจะได้เรียนรู้

ในโค้ดแล็บนี้ คุณจะได้เรียนรู้สิ่งต่อไปนี้

  • วิธีการทำงานของการแสดงภาพข้อมูลจากชุมชนของ Google Data Studio
  • วิธีสร้างการแสดงภาพข้อมูลจากชุมชนด้วยเครื่องมือเทมเพลตบรรทัดคำสั่ง
  • วิธีใช้ไลบรารีการแสดงภาพด้วย JavaScript เพื่อสร้างการแสดงภาพข้อมูลจากชุมชน
  • วิธีผสานรวมการแสดงภาพข้อมูลจากชุมชนเข้ากับแดชบอร์ด Data Studio

สิ่งที่คุณต้องมี

คุณต้องมีสิ่งต่อไปนี้จึงจะทำ Codelab นี้ให้เสร็จสมบูรณ์ได้

  • สิทธิ์เข้าถึงอินเทอร์เน็ต เว็บเบราว์เซอร์ เทอร์มินัล และโปรแกรมแก้ไขข้อความที่คุณชื่นชอบ
  • บัญชี Google
  • สิทธิ์เข้าถึง Bucket ของ Google Cloud Storage
  • คุ้นเคยกับ JavaScript, Node.js และบรรทัดคำสั่ง

Codelab นี้มีสมมติฐานดังนี้

  • คุณได้สร้างการแสดงภาพข้อมูลจากชุมชนแล้ว (TODO link first codelab)
  • คุ้นเคยกับ Google Cloud Storage

หากต้องการเริ่มต้นใช้งาน ให้ทำสำเนารายงานนี้ โดยคลิก14575f934e800122.png ที่มุมขวาบน เปิดไว้ในอีกแท็บขณะที่คุณทำตาม Codelab

2. แบบสำรวจสั้นๆ

ทำไมคุณถึงเลือก Codelab นี้

ฉันสนใจการแสดงข้อมูลด้วยภาพโดยทั่วไป ฉันต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับ Data Studio ฉันต้องการสร้างการแสดงภาพข้อมูลจากชุมชนของตัวเอง ฉันพยายามผสานรวม Data Studio กับแพลตฟอร์มอื่น ฉันสนใจโซลูชันของ Google Cloud

คุณวางแผนที่จะใช้ Codelab/บทแนะนำนี้อย่างไร

อ่านและทำแบบฝึกหัด อ่านผ่านๆ เท่านั้น

คุณจะให้คะแนนประสบการณ์การใช้งาน Data Studio เท่าใด

ไม่เคยได้ยิน ฉันรู้ว่ามันคืออะไร แต่ไม่ได้ใช้ ฉันใช้เป็นประจำ ฉันเป็นผู้ใช้ผู้เชี่ยวชาญ

ข้อใดอธิบายถึงพื้นฐานของคุณได้ดีที่สุด

นักพัฒนาซอฟต์แวร์ นักวิเคราะห์ธุรกิจ / ข้อมูล นักวิทยาศาสตร์ข้อมูล / วิศวกรข้อมูล นักวิเคราะห์การเงิน ผู้เชี่ยวชาญด้านการตลาด / โซเชียลมีเดีย / การวิเคราะห์ข้อมูลดิจิทัล นักวิเคราะห์ธุรกิจ นักออกแบบ อื่นๆ

ไปที่หน้าถัดไปเพื่อส่งข้อมูลแบบสำรวจ

3. การพัฒนาการแสดงภาพข้อมูลจากชุมชนด้วย dscc-gen

dscc-gen

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

ตั้งค่า

dscc-gen ใช้ gsutil ในสคริปต์การติดตั้งใช้งาน รวมถึงใช้ npm และ webpack เพื่อสร้างโค้ด JavaScript ของภาพข้อมูลแบบกำหนดเอง

  1. ติดตั้ง npm ในคอมพิวเตอร์ของคุณ
  2. ทำตามการเริ่มต้นใช้งาน gsutil อย่างรวดเร็วและตั้งค่า Bucket ของ Google Cloud Storage
  3. ไปที่ไดเรกทอรีในเครื่องที่คุณต้องการวางโปรเจ็กต์

4. เริ่มโปรเจ็กต์การแสดงภาพข้อมูลจากชุมชน dscc-gen ใหม่

เปิดเทอร์มินัลแล้วเรียกใช้คำสั่งต่อไปนี้

npx @google/dscc-gen viz

dscc-gen จะแจ้งให้คุณระบุชื่อโปรเจ็กต์ ตำแหน่งที่เก็บข้อมูล GCS "dev" และตำแหน่งที่เก็บข้อมูล "prod" ป้อนตำแหน่งเป็น URI ด้วยโปรโตคอล gs เช่น gs://my-gs-project/example-dev "ตำแหน่ง" อาจเป็น Bucket ของ Cloud Storage หรือโฟลเดอร์ภายใน Bucket นั้น ตำแหน่งที่เก็บข้อมูลทั้ง 2 แห่งต้องแตกต่างกัน เครื่องมือจะตรวจสอบว่าคุณมีสิทธิ์เข้าถึงค่าที่ป้อน หากไม่มีสถานที่ดังกล่าว ระบบจะสร้างให้คุณ

เมื่อ dscc-gen สร้างการแสดงภาพข้อมูลจากชุมชนใหม่แล้ว ก็จะพิมพ์วิธีการเริ่มต้นใช้งาน เทอร์มินัลจะมีลักษณะดังนี้ (อินพุตของคุณในตัวเอียงแบบตัวหนา)

$ npx @google/dscc-gen viz
npx: installed 345 in 14.957s
? Project name barchart
? What is your GCS dev directory? gs://community-visualizations-codelab/barchart-dev
? What is your GCS prod directory? gs://community-visualizations-codelab/barchart-prod
Installing dependencies...

Created new community viz: barchart

cd barchart and npm run start to begin working on your viz!

คุณจะแก้ไขไฟล์ใน src/ ซึ่งได้แก่ index.js, index.json และ index.css เพื่อเขียนภาพข้อมูล

ไฟล์ใน dist/ ช่วยให้คุณดูตัวอย่างภาพในเครื่องได้ในเบราว์เซอร์ webpack.config.js ใช้สำหรับการเรียกใช้การแสดงภาพในเครื่อง README.md ให้ภาพรวมของไฟล์เทมเพลตและคำสั่ง

5. ดูตัวอย่างการแสดงภาพในเครื่อง

ทำตามวิธีการที่แนะนำและเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล

cd <folder name>

npm run start

เบราว์เซอร์จะเปิดขึ้นพร้อมหน้าเว็บที่มีลักษณะดังนี้

2f219993dfb676d4.png

ดูข้อมูลเพิ่มเติมได้ในขั้นตอนถัดไป

6. [ข้อมูล] วิธีที่เวิร์กโฟลว์ dscc-gen ตั้งใจให้ทำงาน

เทมเพลตการแสดงภาพ dscc-gen มาพร้อมกับการแสดงภาพที่ใช้งานได้และวิธีการใช้เทมเพลต ฟังก์ชันหลักมีดังนี้

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

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

สร้างและติดตั้งใช้งานการแสดงข้อมูลด้วยภาพ: สร้างโค้ดและอัปโหลดไปยังที่เก็บข้อมูลใน Google Cloud Storage

โหลดภาพใน Data Studio: เพิ่มภาพลงในรายงาน Data Studio

7. กำหนดค่า

ไฟล์กำหนดค่าคือสัญญาที่ทำระหว่างคุณ (นักพัฒนาภาพ) กับเครื่องมือแก้ไขรายงานที่ใช้ภาพ ซึ่งจะกำหนดตัวเลือกที่ใช้ได้เมื่อโหลดภาพลงใน Data Studio

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

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

index.json

{
  "data": [
    {
      "id": "concepts",
      "label": "Concepts",
      "elements": [
        {
          "id": "dimension",
          "label": "Dimensions",
          "type": "DIMENSION",
          "options": {
            "min": 1,
            "max": 1
          }
        },
        {
          "id": "metric",
          "label": "Metric",
          "type": "METRIC",
          "options": {
            "min": 1,
            "max": 1
          }
        }        
      ]
    }
  ],
  "style": [
    {
      "id": "barStyling",
      "label": "Bar Styles",
      "elements": [
        {
          "id": "barColor",
          "label": "Bar Color",
          "type": "FILL_COLOR",
          "defaultValue": {
            "color": "#1E555C"
          }
        }
      ]
    }
  ]  
}

8. ดาวน์โหลดข้อความที่อัปเดตแล้ว

หากต้องการอัปเดตข้อมูลที่จัดเก็บไว้ในเครื่อง ให้เรียกใช้คำสั่งต่อไปนี้

npm run update_message

เทอร์มินัลควรมีลักษณะดังนี้

barchart $ npm run update_message
> @ update message /Users/Code/barchart
> dscc-scripts viz update_message -f object

Copying file://build/index.js [Content-Type=application/javascript]...
Copying file://build/index.css [Content-Type=text/css]...
Copying file://build/manifest.json [Content-Type=application/json]...
Copying file://build/index.json [Content-Type=application/json]...
\ [4 files][ 48.5 KiB/ 48.5 KiB]
Operation completed over 4 objects/48.5 KiB.
Viz deployed to gs://community-visualizations-codelabs/barchart-dev

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

หากต้องการโหลดภาพ ให้เปิดรายงานที่คุณคัดลอกไว้ก่อนหน้านี้

  1. ไปที่ "แก้ไขรายงาน"
  2. คลิก "การแสดงภาพและคอมโพเนนต์ของชุมชน" ในแถบเครื่องมือ

e927f8fbd49979a5.png

  1. คลิก "สำรวจเพิ่มเติม"

c236b0cfcc68ce2c.png

  1. คลิก "สร้างการแสดงภาพของคุณเอง"
  2. ป้อนเส้นทางไฟล์ Manifest (gs://... ตำแหน่งที่พิมพ์ในเทอร์มินัล) แล้วคลิกส่ง

26588c6c8382a3b.png

  1. คลิกการ์ดที่แสดงผลเพื่อเพิ่มลงในรายงาน

การแสดงภาพควรแสดงผล JSON ที่มีลักษณะดังนี้

a08a61345fe12837.png

คัดลอกข้อความทั้งหมดโดยคลิกขวาแล้วเลือกทั้งหมด จากนั้นแทนที่เนื้อหาของ src/localMessage.js ด้วยเนื้อหาที่คุณเพิ่งคัดลอก บันทึกไฟล์

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

9. เขียน JavaScript สำหรับแผนภูมิแท่ง

ก่อนอื่น ให้เรียกใช้คำสั่งต่อไปนี้เพื่อเพิ่ม d3.js เป็นทรัพยากร Dependency

npm install d3

จากนั้นแทนที่ src/index.js ด้วยโค้ดต่อไปนี้ การเปลี่ยนแปลงจากขั้นตอนสุดท้ายจะแสดงเป็นตัวหนา

src/index.js

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = true;

const drawViz = (message) => {
  const margin = { left: 20, right: 20, top: 20, bottom: 20 };
  const height = dscc.getHeight() - 10;
  const width = dscc.getWidth();

  const chartHeight = height - margin.top - margin.bottom;
  const chartWidth = width - margin.left - margin.right;

  // remove existing svg
  d3.select("body")
    .selectAll("svg")
    .remove();

  // make a canvas
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // make an svg for the bar chart
  const chartSvg = svg
    .append("svg")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", chartWidth)
    .attr("height", chartHeight);

  // xScale to distribute bars
  const xScale = d3
    .scaleBand()
    .domain(message.tables.DEFAULT.map(d => d.dimension[0]))
    .range([0, chartWidth])
    .paddingInner(0.3);

  // yScale to size bars
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
    .range([0, chartHeight]);

  // add bars
  const bars = chartSvg
    .append("g")
    .attr("class", "bars")
    .selectAll("rect.bars")
    .data(message.tables.DEFAULT)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.dimension[0]))
    .attr("y", d => chartHeight - yScale(d.metric[0]))
    .attr("width", xScale.bandwidth())
    .attr("height", d => yScale(d.metric[0]));

  // add text
  const text = svg
    .append("g")
    .selectAll("text")
    .data(message.tables.DEFAULT)
    .enter()
    .append("text")
    .attr(
      "x",
      d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
    )
    .attr("y", height - margin.bottom / 4)
    .attr("text-anchor", "middle")
    .text(d => d.dimension[0]);
};

// renders locally
if (LOCAL) {
  drawViz(local.message);
} else {
  dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}

หากเซิร์ฟเวอร์ภายในยังคงทำงานอยู่ ให้ตรวจสอบเบราว์เซอร์ ตอนนี้หน้าเว็บการพัฒนาในเครื่องควรแสดงแผนภูมิแท่งเหมือนกับแผนภูมิด้านล่าง

2cb9f9d8d1bd2063.png

10. อัปเดตไฟล์ Manifest (ไม่บังคับ)

ไฟล์ Manifest ของภาพประกอบมีข้อมูลเมตาเกี่ยวกับภาพประกอบ รวมถึงตำแหน่งของ JavaScript, การกำหนดค่า และ CSS ของภาพประกอบ อัปเดตค่าในไฟล์ Manifest ซึ่งจะใช้เพื่อแสดงข้อมูลเกี่ยวกับการแสดงภาพแก่ผู้ใช้ปลายทาง

แก้ไข src/manifest.json เพื่ออธิบายการแสดงข้อมูลภาพ ดูตัวอย่างไฟล์ Manifest ได้ที่ด้านล่าง

src/manifest.json

{
  "name": "Bar Chart",
  "organization": "[My name]",
  "description": "Bar chart",
  "logoUrl": "https://storage.googleapis.com/community-visualizations-codelabs/barchart/bar_chart.png",
  "organizationUrl": "https://github.com/googledatastudio/",
  "supportUrl": "http://github.com/googledatastudio/community-visualizations",
  "privacyPolicyUrl": "http://github.com/googledatastudio/community-visualizations",
  "termsOfServiceUrl": "http://github.com/googledatastudio/community-visualizations",
  "packageUrl": "",
  "devMode": "DEVMODE_BOOL",
  "components": [
    {
      "id": "Bar chart",
      "name": "Bar chart",
      "description": "My first Community Visualization",
      "iconUrl": "https://storage.googleapis.com/community-visualizations-codelabs/table/table_icon.png",
      "resource": {
        "js": "YOUR_GCS_BUCKET/index.js",
        "config": "YOUR_GCS_BUCKET/index.json",
        "css": "YOUR_GCS_BUCKET/index.css"
      }
    }
  ]
}

11. ติดตั้งใช้งานการแสดงภาพ

ใน src/index.js ให้เปลี่ยน const LOCAL เป็น "false" การแสดงภาพในเบราว์เซอร์ควรหยุดทำงาน บรรทัดโค้ดที่เปลี่ยนแปลงจะเป็นตัวหนา บูลีนนี้จะกำหนดค่าว่าโค้ดควรใช้ไฟล์ข้อมูล "ในเครื่อง" หรือข้อมูลที่ได้รับจาก Data Studio

src/index.js (abridged)

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deployment
export const LOCAL = false;

const drawViz = (message) => {...}

จากนั้นเรียกใช้คำสั่งต่อไปนี้ในเทอร์มินัล

npm run build:dev
npm run push:dev

คำสั่ง build:dev จะรวมทรัพยากร Dependency ของ JavaScript ไว้ในเอาต์พุตที่ไม่ได้ย่อขนาด และแทนที่ค่าในไฟล์ Manifest เพื่อปิดใช้แคชและชี้ไปยังที่เก็บข้อมูล "dev" ที่คุณกำหนดค่าไว้ก่อนหน้านี้

คำสั่ง push:dev จะอัปโหลดทรัพยากรการแสดงข้อมูลของคุณไปยังที่เก็บข้อมูล "dev" ที่คุณกำหนดค่าไว้ในขั้นตอนที่ 1 และพิมพ์ตำแหน่งที่เก็บข้อมูลไปยังคอนโซล

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

12. ใช้การเลือกสีของเครื่องมือแก้ไขรายงานในแผนภูมิแท่ง

หากต้องการแก้ไขโค้ดในเครื่อง ให้อัปเดตตัวแปร const LOCAL ใน src/index.js เป็น true ก่อน จากนั้นเพิ่มฟังก์ชันใหม่ชื่อ styleVal() และอัปเดตโค้ดใน drawViz() src/index.js ควรมีลักษณะดังนี้

src/index.js

const d3 = require('d3');
const dscc = require('@google/dscc');
const local = require('./localMessage.js');

// change this to 'true' for local development
// change this to 'false' before deploying
export const LOCAL = false;

// parse the style value
const styleVal = (message, styleId) => {
  if (typeof message.style[styleId].defaultValue === "object") {
    return message.style[styleId].value.color !== undefined
      ? message.style[styleId].value.color
      : message.style[styleId].defaultValue.color;
  }
  return message.style[styleId].value !== undefined
    ? message.style[styleId].value
    : message.style[styleId].defaultValue;
};

const drawViz = message => {
  const margin = { left: 20, right: 20, top: 20, bottom: 20 };
  const height = dscc.getHeight() - 10;
  const width = dscc.getWidth();

  const chartHeight = height - margin.top - margin.bottom;
  const chartWidth = width - margin.left - margin.right;

  // remove existing svg
  d3.select("body")
    .selectAll("svg")
    .remove();

  // make a canvas
  const svg = d3
    .select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

  // make an svg for the bar chart
  const chartSvg = svg
    .append("svg")
    .attr("x", margin.left)
    .attr("y", margin.top)
    .attr("width", chartWidth)
    .attr("height", chartHeight);

  // xScale to distribute bars
  const xScale = d3
    .scaleBand()
    .domain(message.tables.DEFAULT.map(d => d.dimension[0]))
    .range([0, chartWidth])
    .paddingInner(0.3);

  // yScale to size bars
  const yScale = d3
    .scaleLinear()
    .domain([0, d3.max(message.tables.DEFAULT.map(d => d.metric[0]))])
    .range([0, chartHeight]);

  // get the user-selected bar color
  let barColor = styleVal(message, "barColor");

  // add bars
  const bars = chartSvg
    .append("g")
    .attr("class", "bars")
    .selectAll("rect.bars")
    .data(message.tables.DEFAULT)
    .enter()
    .append("rect")
    .attr("x", d => xScale(d.dimension[0]))
    .attr("y", d => chartHeight - yScale(d.metric[0]))
    .attr("width", xScale.bandwidth())
    .attr("height", d => yScale(d.metric[0]))
    .attr("fill", barColor);

  // add text
  const text = svg
    .append("g")
    .selectAll("text")
    .data(message.tables.DEFAULT)
    .enter()
    .append("text")
    .attr(
      "x",
      d => xScale(d.dimension[0]) + xScale.bandwidth() / 2 + margin.left
    )
    .attr("y", height - margin.bottom / 4)
    .attr("text-anchor", "middle")
    .attr("fill", barColor)
    .text(d => d.dimension[0]);
};

// renders locally
if (LOCAL) {
  drawViz(local.message);
} else {
  dscc.subscribeToData(drawViz, {transform: dscc.objectTransform});
}

บันทึก src/index.js แล้วกลับไปที่เซสชันเบราว์เซอร์ในเครื่อง ดูการทำงานในเครื่อง จากนั้นเปลี่ยนค่าคงที่ LOCAL เป็น false

อัปโหลดไฟล์ที่อัปเดตแล้วไปยัง Google Cloud Storage โดยเรียกใช้คำสั่งต่อไปนี้

npm run build:dev
npm run push:dev

รีเฟรชรายงาน Data Studio ตอนนี้คุณควรเปลี่ยนสีของแถบได้แล้ว

fd4e436a6e8dd58b.gif

13. การติดตั้งใช้งานเวอร์ชันจริง

การติดตั้งใช้งานเวอร์ชันจริง

เมื่อพอใจกับการแสดงภาพแล้ว ให้ตรวจสอบว่า const LOCAL ใน src/index.js เป็น false แล้วจึงเรียกใช้

npm run build:prod
npm run push:prod

การดำเนินการนี้จะทําให้ระบบนําไฟล์ไปใช้ในตำแหน่งที่ตั้งของที่เก็บ GCS "prod" นอกจากนี้ ระบบจะเปิดใช้การแคชและย่อ JavaScript ที่รวมไว้ให้เหมาะสม

ระบบจะพิมพ์ตำแหน่งการติดตั้งใช้งานในคอนโซลเช่นเดียวกับก่อนหน้านี้ ใช้ "เส้นทางไฟล์ Manifest" นี้เพื่อโหลดการแสดงภาพ "prod" ในรายงาน Data Studio

ยินดีด้วย คุณเพิ่งสร้างการแสดงภาพข้อมูลจากชุมชนรายการแรกด้วยเครื่องมือ dscc-gen

14. ขั้นตอนถัดไป

ขยายการแสดงภาพ

ทำสิ่งต่างๆ ได้มากขึ้นด้วยการแสดงภาพข้อมูลจากชุมชน

แหล่งข้อมูลเพิ่มเติม

ด้านล่างนี้คือแหล่งข้อมูลต่างๆ ที่คุณเข้าถึงได้เพื่อช่วยให้คุณเจาะลึกเนื้อหาที่ครอบคลุมในโค้ดแล็บนี้

ประเภททรัพยากร

ฟีเจอร์สำหรับผู้ใช้

ฟีเจอร์สำหรับนักพัฒนาแอป

เอกสารประกอบ

ศูนย์ช่วยเหลือ

เอกสารประกอบสำหรับนักพัฒนาซอฟต์แวร์

ข่าวสารและข้อมูลอัปเดต

ลงชื่อสมัครใช้ใน Data Studio > การตั้งค่าผู้ใช้

รายชื่ออีเมลของนักพัฒนาแอป

ถามคำถาม

ฟอรัมผู้ใช้

Stack Overflow [google-data-studio]ฟอรัมนักพัฒนาซอฟต์แวร์ Data Studio

วิดีโอ

Data Studio ใน YouTube

พร้อมให้บริการเร็วๆ นี้

ตัวอย่าง

แกลเลอรีรายงาน

ที่เก็บโอเพนซอร์ส