דף זה תורגם על ידי Cloud Translation API.

יצירת המחשות JavaScript בהתאמה אישית ב-Data Studio

Google Data Studio מאפשר למשתמשים ליצור בחינם מרכזי בקרה אינטראקטיביים בזמן אמת עם תצוגות חזותיות יפות של נתונים. המשתמשים יכולים לאחזר את הנתונים שלהם ממגוון מקורות וליצור דוחות ב-Data Studio, עם יכולות מלאות של עריכה ושיתוף. דוגמה ללוח בקרה ב-Data Studio:

(כאן אפשר לראות דוגמה לדוח ב-Data Studio)

ב-Data Studio יש כמה סוגי תרשימים מובנים, כולל תרשימי קו, תרשימי עמודות, תרשימי עוגה ותרשימי פיזור. המחשות של הקהילה מאפשרות לכם ליצור ולהשתמש בהמחשות מותאמות אישית של JavaScript ב-Data Studio. תצוגות חזותיות של הקהילה נוצרות על ידי קהילת המפתחים של Data Studio – כל מפתח יכול ליצור תצוגה חזותית כזו. אתם יכולים גם לשתף את ההדמיות הקהילתיות שלכם עם אחרים, כדי שהם יוכלו להשתמש בהן עם הנתונים שלהם.

מה תלמדו

בשיעור ה-Lab הזה תלמדו:

איך פועלת המחשה קהילתית ב-Google Data Studio
איך יוצרים תרשים קהילתי באמצעות ספריית העזר ds-component
איך משלבים תצוגה חזותית של הקהילה במרכז בקרה של Data Studio

מה נדרש

כדי להשלים את שיעור ה-Lab הזה, תצטרכו:

גישה לאינטרנט ולדפדפן אינטרנט
חשבון Google
גישה לקטגוריית אחסון ב-Google Cloud Platform
היכרות עם JavaScript

למה בחרת ב-Codelab הזה?

אני מתעניין בהמחשת נתונים באופן כללי.

אני רוצה ללמוד עוד על Data Studio

אני רוצה ליצור ויזואליזציה משלי לקהילה.

אני מנסה לשלב את Data Studio עם פלטפורמה אחרת.

אני רוצה לקבל מידע על פתרונות של Google Cloud.

איך תכננת להשתמש ב-codelab או במדריך הזה?

רפרוף בלבד

קריאה והשלמת התרגילים

איזה דירוג מתאים לדעתך לחוויית השימוש שלך ב-Data Studio?

לא שמעתי על זה אף פעם

אני יודע מה זה אבל לא משתמש בזה

אני משתמש בו מדי פעם.

אני משתמש בו באופן קבוע.

אני משתמש מומחה.

מה מתאר את הרקע שלך בצורה הטובה ביותר?

מפתח

מעצב / מומחה UX

אנליסט עסקי / אנליסט נתונים / אנליסט פיננסי

מדען נתונים / מהנדס נתונים

מומחה שיווק / מומחה מדיה חברתית / מומחה ניתוח נתונים דיגיטליים

אחר

אילו ספריות של JavaScript להדמיה מעניינות אותך?

D3.js

Google Charts

Chart.js

Leaflet

Highcharts

Plot.ly

Other

עוברים לדף הבא כדי לשלוח את פרטי הסקר.

המחשות קהילתיות ב-Data Studio מאפשרות לכם ליצור ולהשתמש בהמחשות מותאמות אישית של JavaScript שמשולבות בלוחות הבקרה שלכם.

ב-codelab הזה תיצרו תרשים עמודות של תצוגה חזותית קהילתית שתומכת במימד אחד, במדד אחד ובסגנון צבע של עמודות.

כדי ליצור תרשים ויזואלי של קהילה, צריך את הקבצים הבאים בקטגוריית אחסון ב-Google Cloud Platform, שתיצרו בשלב מאוחר יותר.

שם קובץ	סוג קובץ	מטרה
manifest.json*	JSON	מספק מטא-נתונים על ההדמיה ועל המיקום של המשאבים האחרים.
myViz.json	JSON	מספק אפשרויות להגדרת נתונים וסגנון עבור החלונית 'נכס'.
myViz.js	JavaScript	מספק את קוד ה-JavaScript שנדרש להצגת התצוגה החזותית.
myViz.css (אופציונלי)	CSS	הגדרת סגנון לתצוגה החזותית.

*המניפסט הוא הקובץ היחיד שחייב לכלול שם. אפשר לתת לקבצים האחרים שמות שונים, כל עוד השם או המיקום שלהם מצוינים בקובץ המניפסט.

בקטע הזה, מוסיפים לקובץ ה-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 של הגדרות הוויזואליזציה מגדיר את מאפייני הנתונים והסגנון שנתמכים בוויזואליזציה ונדרשים לה. התצוגה החזותית שתיצרו ב-codelab הזה תתמוך במימד אחד ובמדד אחד, ותדרוש רכיב סגנון אחד לבחירת צבע. מידע נוסף על מאפיינים ומדדים

מעתיקים את הקוד הבא ושומרים אותו כקובץ 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: יוצרים bucket ב-GCP. סוג האחסון המומלץ הוא Regional. פרטים על רמות שירות בחינם זמינים בדף תמחור של Cloud Storage. לא סביר שתחויבו על אחסון הוויזואליזציה בסוג האחסון Regional.

שלב 3: רושמים את שם הקטגוריה או הנתיב שלה, החל מהקטע שאחרי Buckets/ . ב-Data Studio זה נקרא 'מזהה הרכיב', והוא ישמש לזיהוי ולפריסה.

קובץ המניפסט מספק מידע על המיקום של אמצעי ההמחשה והמשאבים שלכם. הוא צריך להיקרא manifest.json ולהיות ממוקם בדלי שנוצר בשלב הקודם (אותו דלי שמשמש למזהה הרכיב).

מעתיקים את הקוד הבא לעורך טקסט ושומרים אותו בשם manifest.json.

מידע נוסף על המניפסט מופיע במאמר בנושא מניפסט.

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 ולוחצים על Blank (ריק) בקטע Start a new report (התחלת דוח חדש).

שלב 3: בפינה השמאלית התחתונה, לוחצים על יצירת מקור נתונים חדש.

שלב 4: בוחרים את המחבר Google Sheets.

שלב 5: בשדה כתובת URL, מזינים את כתובת ה-URL של גיליון Google משלב 1 שלמעלה.

שלב 6: בפינה השמאלית העליונה של הדף, לוחצים על CONNECT (חיבור).

שלב 7: בכותרת של מקור הנתונים, לוחצים על גישה להדמיות של הקהילה, בוחרים באפשרות מופעל ולוחצים על שמירה.

שלב 7: לוחצים על הוספה לדוח בתיבה שמופיעה כדי להוסיף את מקור הנתונים לדוח.

שלב 6: בסרגל הכלים, לוחצים על לחצן ההדמיה של הקהילה . ייפתח תפריט נפתח.

שלב 7: מדביקים את שם ה-bucket עם הקידומת gs:// (, לדוגמה: gs://community-viz-docs/myViz), בתיבת הטקסט של 'נתיב המניפסט', מוסיפים barChart בקטע 'מזהה הרכיב' ולוחצים על 'הוספה'.

ההדמיה תצויר באופן אוטומטי באזור העריכה. חלונית המאפיינים בצד שמאל אמורה לשקף את הרכיבים בקובץ myViz.json.

אפשר ליצור תצוגה חזותית של מימד אחד ומדד אחד.

צוין אלמנט סגנון אחד – מוצג בורר צבעי גופן עם התווית 'צבע פס'. בשלב הבא, תשתמשו בכלי הבחירה הזה כדי להשפיע על ההדמיה.

בקטע הזה, תשתמשו באלמנט הסגנון של בורר הצבעים כדי לעדכן את הוויזואליזציה.

שלב 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, קובץ המניפסט וקובץ ההגדרות.
שליחת התצוגה החזותית לCommunity Visualization Showcase (תצוגת תכונות של תצוגות חזותיות של הקהילה).
יצירת מחבר קהילתי ל-Data Studio.

מקורות מידע נוספים

בהמשך מפורטים מקורות מידע שונים שאפשר לגשת אליהם כדי להעמיק בחומרים שמוצגים ב-codelab הזה.

סוג המשאב	תכונות משתמש	תכונות למפתחים
מסמכי תיעוד	מרכז העזרה	תיעוד למפתחים
חדשות ועדכונים	נרשמים ב-Data Studio > הגדרות משתמש	רשימת תפוצה למפתחים
שאלות	פורום משתמשים	Stack Overflow [google-data-studio] פורום המפתחים של Data Studio
סרטונים	Data Studio ב-YouTube	בקרוב!
דוגמאות	Report Gallery	מאגר קוד פתוח

יצירת המחשות JavaScript בהתאמה אישית ב-Data Studio קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

מה תלמדו

מה נדרש

למה בחרת ב-Codelab הזה?

איך תכננת להשתמש ב-codelab או במדריך הזה?

איזה דירוג מתאים לדעתך לחוויית השימוש שלך ב-Data Studio?

מה מתאר את הרקע שלך בצורה הטובה ביותר?

אילו ספריות של JavaScript להדמיה מעניינות אותך?

כתיבת המקור של התצוגה החזותית

myVizSource.js

הכנת קובץ ה-JavaScript הסופי

תסריט שרשור ל-Linux/Mac OS

סקריפט Windows

myViz.css

myViz.json

manifest.json

פקודות העלאה של gsutil

myVizSource.js

myVizSource.js

myVizSource.js

הרחבת התצוגה החזותית

עוד פעולות שאפשר לבצע בעזרת תרשימים של הקהילה

מקורות מידע נוספים

יצירת המחשות JavaScript בהתאמה אישית ב-Data Studio