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

1. บทนำ

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

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

คุณจะได้เรียนรู้เกี่ยวกับสิ่งต่อไปนี้ใน Codelab นี้

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

สิ่งที่ต้องมี

คุณต้องมีสิ่งต่อไปนี้เพื่อดำเนินการ Codelab นี้ให้เสร็จสมบูรณ์

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

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

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

หากต้องการเริ่มต้นใช้งาน ให้ทําสําเนารายงานนี้ โดยคลิก ที่มุมขวาบน โปรดเปิดไว้ในแท็บอื่นขณะดู 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 และตั้งค่าที่เก็บข้อมูล Google Cloud Storage
3. ไปยังไดเรกทอรีในเครื่องที่คุณต้องการค้นหาโปรเจ็กต์

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

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

npx @google/dscc-gen viz

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

หมายเหตุ: คุณควรทำให้การแสดงภาพข้อมูลจากชุมชนใช้งานได้ 2 แบบ คือแบบ "dev" การติดตั้งใช้งานกับไฟล์ที่ไม่ได้ลดขนาดและการแคชที่ปิดใช้ และ "ผลิตภัณฑ์" การทำให้ใช้งานได้ด้วยไฟล์ที่ลดขนาดลงและเปิดใช้การแคช "กำลังพัฒนา" การติดตั้งใช้งานจะโหลดไฟล์ล่าสุดและแก้ไขข้อบกพร่องได้ง่ายขึ้น ในขณะที่ "prod" การทำให้ใช้งานได้ก็จะโหลดเร็วขึ้น

เมื่อ 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

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

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

6. [ข้อมูล] จุดประสงค์ของเวิร์กโฟลว์ DSC-gen

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

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

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

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

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

หมายเหตุ: คำว่า "ข้อความ" หมายถึงข้อมูลที่คอมโพเนนต์ ds ส่งผ่านเป็นพารามิเตอร์ไปยังฟังก์ชัน Callback ที่ลงทะเบียนไว้ในโค้ด

7. ระบุการกำหนดค่า

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

สำหรับการแสดงภาพแผนภูมิแท่งนี้ การกำหนดค่าจะมีมิติข้อมูล 1 รายการและเมตริก 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. คลิกที่ "การแสดงภาพและคอมโพเนนต์จากชุมชน" ในแถบเครื่องมือ

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

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

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

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

คัดลอกข้อความทั้งหมดโดยคลิกขวาและเลือกทั้งหมด แล้วแทนที่เนื้อหาของ 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});
}

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

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

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

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

คำเตือน: ห้ามแก้ไข devMode และ components[].resource DEVMODE_BOOL และ YOUR_GCS_BUCKET โดยเป็นตัวยึดตำแหน่งสำหรับการแทนที่ที่เทมเพลต dscc-gen จะสร้างให้คุณ

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" การแสดงภาพในเบราว์เซอร์ควรหยุดทำงาน บรรทัดโค้ดที่เปลี่ยนแปลงจะเป็นตัวหนา บูลีนนี้จะกำหนดค่าว่าโค้ดควรใช้ "local" หรือไม่ หรือข้อมูลที่ได้รับจาก 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. ใช้ตัวเลือกสีของเครื่องมือแก้ไขรายงานในแผนภูมิแท่ง

หากต้องการแก้ไขโค้ดในเครื่อง ก่อนอื่นให้อัปเดตตัวแปร LOCAL ของ Const ใน 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 จากนั้นกลับไปที่เซสชันเบราว์เซอร์ในเครื่อง โปรดดูในเครื่อง จากนั้นเปลี่ยน Const LOCAL เป็น false

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

npm run build:dev
npm run push:dev

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

13. การติดตั้งใช้งานผลิตภัณฑ์

การติดตั้งใช้งานผลิตภัณฑ์

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

npm run build:prod
npm run push:prod

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

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

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

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

ขยายการแสดงข้อมูลผ่านภาพ

• เพิ่มการโต้ตอบในการแสดงภาพ
• ดูข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบของรูปแบบที่มีอยู่ และเพิ่มรูปแบบเพิ่มเติมให้กับการแสดงภาพ

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

• ตรวจสอบข้อมูลอ้างอิงสำหรับไลบรารีตัวช่วยของ dscc, ไฟล์ Manifest และไฟล์การกำหนดค่า
• ส่งการแสดงภาพไปที่โชว์เคสการแสดงภาพข้อมูลของชุมชน
• สร้างปลั๊กอินจากชุมชนสำหรับใช้ลิงก์ข้อมูล สำหรับ Data Studio

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

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

ประเภททรัพยากร	ฟีเจอร์สำหรับผู้ใช้	ฟีเจอร์สำหรับนักพัฒนาแอป
เอกสารประกอบ	ศูนย์ช่วยเหลือ	เอกสารสำหรับนักพัฒนาซอฟต์แวร์
ข่าวสารและ ข้อมูลอัปเดต	ลงชื่อสมัครใช้ใน Data Studio > การตั้งค่าของผู้ใช้	รายชื่ออีเมลของนักพัฒนาแอป
ถามคำถาม	ฟอรัมผู้ใช้	Stack Overflow [google-data-studio]ฟอรัมสำหรับนักพัฒนาซอฟต์แวร์ Data Studio
วิดีโอ	Data Studio บน YouTube	ฟีเจอร์ที่จะมีให้บริการเร็วๆ นี้
ตัวอย่าง	แกลเลอรีรายงาน	ที่เก็บโอเพนซอร์ส