این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

ایجاد تجسم جاوا اسکریپت سفارشی در Data Studio

Google Data Studio به کاربران این امکان را می‌دهد تا داشبوردهای زنده و تعاملی را با تجسم داده‌های زیبا به صورت رایگان بسازند. کاربران می‌توانند داده‌های خود را از منابع مختلف دریافت کنند و با قابلیت ویرایش و اشتراک‌گذاری کامل، گزارش‌هایی را در Data Studio ایجاد کنند. در اینجا یک نمونه داشبورد Data Studio آورده شده است:

( برای مشاهده این گزارش نمونه در Data Studio اینجا را کلیک کنید )

Data Studio چندین نوع نمودار داخلی از جمله نمودارهای خطی، نمودار میله ای، نمودار دایره ای و نمودارهای پراکنده را ارائه می دهد. تجسم‌های انجمن به شما این امکان را می‌دهند که تجسم‌های جاوا اسکریپت سفارشی خود را در Data Studio ایجاد و استفاده کنید. تجسم های انجمن توسط انجمن توسعه دهندگان Data Studio ساخته می شوند - هر توسعه دهنده ای می تواند یکی بسازد. همچنین می توانید تجسم های انجمن خود را با دیگران به اشتراک بگذارید تا آنها بتوانند از آنها با داده های خود استفاده کنند.

چیزی که یاد خواهید گرفت

در این آزمایشگاه کد، یاد خواهید گرفت:

نحوه عملکرد تجسم انجمن Google Data Studio
چگونه با استفاده از کتابخانه کمکی ds-component یک تجسم جامعه بسازیم
چگونه تجسم جامعه خود را در داشبورد Data Studio ادغام کنید

آنچه شما نیاز دارید

برای تکمیل این آزمایشگاه کد، شما نیاز دارید:

دسترسی به اینترنت و مرورگر وب
یک حساب کاربری گوگل
دسترسی به سطل فضای ذخیره سازی Google Cloud Platform
آشنایی با جاوا اسکریپت

چرا این کد لبه را انتخاب کردید؟

من به طور کلی به تجسم داده ها علاقه مند هستم.

من می خواهم درباره Data Studio اطلاعات بیشتری کسب کنم

من می خواهم تجسم جامعه خود را بسازم.

من سعی می کنم Data Studio را با پلتفرم دیگری ادغام کنم.

من به راه حل های Google Cloud علاقه مند هستم.

چگونه می خواهید از این نرم افزار / آموزش استفاده کنید؟

فقط از بین می رود

آن را بخوانید و تمرینات را کامل کنید

تجربه خود را با Data Studio چگونه ارزیابی می کنید؟

هرگز در مورد آن نشنیده اید

میدونم چیه ولی استفاده نمیکنم

من گهگاه از آن استفاده می کنم.

من به طور منظم از آن استفاده می کنم.

من یک کاربر متخصص هستم.

چه چیزی پیشینه شما را بهتر توصیف می کند؟

توسعه دهنده

طراح / متخصص UX

تجارت / داده / تحلیلگر مالی

دانشمند داده / مهندس داده

کارشناس بازاریابی / رسانه های اجتماعی / تجزیه و تحلیل دیجیتال

دیگر

به چه کتابخانه های تجسم جاوا اسکریپت علاقه دارید؟

D3.js

نمودارهای گوگل

Chart.js

جزوه

نمودارهای برتر

Plot.ly

دیگر

برای ارسال اطلاعات نظرسنجی به صفحه بعدی بروید.

تجسم‌های انجمن داده استودیو به شما امکان می‌دهد تجسم‌های جاوا اسکریپت سفارشی ایجاد و استفاده کنید که در داشبورد شما ادغام می‌شوند.

در این کد لبه، شما یک تجسم جامعه نمودار میله ای ایجاد می کنید که از 1 بعد، 1 متریک و سبک رنگ میله پشتیبانی می کند.

برای ایجاد تجسم انجمن، به فایل‌های زیر در یک سطل ذخیره‌سازی Google Cloud Platform نیاز دارید که در مرحله بعد ایجاد خواهید کرد.

نام فایل	نوع فایل	هدف
manifest.json*	JSON	فراداده ای را در مورد تجسم و مکان سایر منابع ارائه می دهد.
myViz.json	JSON	گزینه های پیکربندی داده و سبک را برای پانل Property ارائه می دهد.
myViz.js	جاوا اسکریپت	کد جاوا اسکریپت مورد نیاز برای نمایش تجسم را ارائه می دهد.
myViz.css (اختیاری)	CSS	یک ظاهر طراحی را برای تجسم ارائه می دهد.

*مانیفست تنها فایلی است که نام مورد نیاز دارد. تا زمانی که نام/محل آنها در فایل مانیفست شما مشخص شده باشد، می‌توان سایر فایل‌ها را متفاوت نام‌گذاری کرد.

در این بخش، کد مورد نیاز برای مدیریت داده‌ها، تغییرات سبک، و رندر تصویرسازی را به فایل جاوا اسکریپت خود اضافه می‌کنید.

منبع تجسم را بنویسید

مرحله 1: فایل dscc.min.js را از Data Studio Community Component Library دانلود کنید و آن را در فهرست کاری خود کپی کنید.

مرحله 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 });

فایل جاوا اسکریپت نهایی را آماده کنید

مرحله 3: تمام جاوا اسکریپت مورد نیاز را با کپی کردن محتویات کتابخانه کمکی تجسم ( dscc.min.js ) و فایل myVizSource.js در یک فایل جدید به نام myViz.js در یک فایل ترکیب کنید. برای ادغام فایل ها دستورات زیر را اجرا کنید. هر بار که کد تجسم خود را به روز می کنید، این مرحله را تکرار کنید.

اسکریپت الحاق لینوکس/مک OS

cat dscc.min.js > myViz.js
echo >> myViz.js
cat myVizSource.js >> myViz.js

اسکریپت ویندوز

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 ویژگی های داده و سبک را که توسط تجسم شما پشتیبانی و مورد نیاز است را تعریف می کند. این تصویرسازی که در این کد لبه می‌سازید از یک بعد و یک متریک پشتیبانی می‌کند و برای انتخاب یک رنگ به یک عنصر سبک نیاز دارد. درباره ابعاد و معیارها بیشتر بیاموزید .

کد زیر را کپی کرده و به عنوان 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 ایجاد کنید . کلاس ذخیره سازی توصیه شده منطقه ای است. برای جزئیات بیشتر در مورد سطوح رایگان ، از قیمت گذاری فضای ذخیره سازی ابری دیدن کنید. بعید است فضای ذخیره سازی تجسم شما هزینه ای برای کلاس ذخیره سازی منطقه ای داشته باشد.

مرحله 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 را با استفاده از رابط وب یا ابزار خط فرمان gsutil در سطل فضای ذخیره‌سازی Google Cloud آپلود کنید. هر بار که تجسم خود را به روز می کنید این کار را تکرار کنید.

دستورات آپلود 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: نشانی وب مجموعه داده نمونه تجسم جامعه را کپی کنید.

مرحله 2: از Data Studio دیدن کنید و روی Blank در قسمت Start a new report کلیک کنید.

مرحله 3: در پایین سمت راست، روی ایجاد منبع داده جدید کلیک کنید.

مرحله 4: رابط Google Sheets را انتخاب کنید.

مرحله 5: در فیلد URL ، آدرس صفحه Google Sheet را از مرحله 1 بالا وارد کنید.

مرحله 6: در سمت راست بالای صفحه، روی CONNECT کلیک کنید

مرحله 7: در هدر منبع داده، روی دسترسی به تجسم‌های انجمن کلیک کنید، ON را انتخاب کنید و روی ذخیره کلیک کنید.

مرحله 7 : روی افزودن به گزارش در کادر ظاهر شده کلیک کنید تا منبع داده را به گزارش خود اضافه کنید.

مرحله 6: در نوار ابزار، روی دکمه تجسم جامعه کلیک کنید . با این کار یک کشویی باز می شود.

مرحله 7: نام سطل خود را با پیشوند gs:// ( به عنوان مثال: gs://community-viz-docs/myViz) در ورودی متن برای "مسیر آشکار" قرار دهید، barChart در قسمت "Component ID" اضافه کنید و روی "ADD" کلیک کنید.

تجسم شما به طور خودکار روی بوم شما ترسیم می شود. پانل ویژگی در سمت راست باید عناصر موجود در فایل 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: فایل ترکیبی جاوا اسکریپت را ایجاد کنید، سپس فایل های تجسم خود را دوباره در Google Cloud Storage آپلود کنید.

مرحله 3: گزارش Data Studio را در جایی که تجسم جامعه خود را آزمایش کردید، بازخوانی کنید.

شما باید بتوانید رنگ مستطیل را با استفاده از انتخابگر در منوی سبک تغییر دهید.

در این بخش، تجسم خود را به‌روزرسانی می‌کنید تا با استفاده از داده‌های مجموعه داده نمونه تجسم انجمن، نمودار میله‌ای بکشید. توجه: Data Studio حداکثر 2500 ردیف داده را به تصویرسازی برمی گرداند.

مرحله 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: فایل ترکیبی جاوا اسکریپت را ایجاد کنید، سپس فایل های تجسم خود را دوباره در Google Cloud Storage آپلود کنید.

مرحله 3: گزارش Data Studio را در جایی که تجسم جامعه خود را آزمایش کردید، بازخوانی کنید. شما باید یک نمودار میله ای با برچسب های تولید شده از داده های Google Sheet داشته باشید. برای تغییر رنگ نوارها، رنگ انتخاب شده در انتخابگر Style "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: فایل ترکیبی جاوا اسکریپت را ایجاد کنید، سپس فایل های تجسم خود را دوباره در Google Cloud Storage آپلود کنید.

مرحله 3: گزارش Data Studio را در جایی که تجسم جامعه خود را آزمایش کردید، بازخوانی کنید. شما باید یک نمودار میله ای با عنوانی داشته باشید که از داده ها تولید شده و با استفاده از فایل myViz.css خود استایل دهی شده باشد.

تبریک می گویم - شما یک تجسم انجمن در Data Studio ایجاد کرده اید! این شما را به پایان این کد لبه می‌رساند. حال، بیایید ببینیم چه گام های بعدی می توانید بردارید.

تجسم خود را گسترش دهید

تعاملات را به تجسم خود اضافه کنید
یاد بگیرید که به صورت محلی تجسم ایجاد کنید
درباره عناصر سبک موجود بیشتر بیاموزید و استایل بیشتری به تجسم خود اضافه کنید.

با تجسم های جامعه کارهای بیشتری انجام دهید

مراجع مربوط به کتابخانه کمکی dscc ، مانیفست و فایل پیکربندی را مرور کنید.
تجسم خود را به نمایشگاه تجسم انجمن ما ارسال کنید.
یک رابط انجمن برای Data Studio بسازید.

منابع اضافی

در زیر منابع مختلفی وجود دارد که می‌توانید به آنها دسترسی داشته باشید تا به شما کمک کند تا در مطالبی که در این کد لابلای پوشش داده شده است عمیق‌تر شوید.

نوع منبع	ویژگی های کاربر	ویژگی های توسعه دهنده
مستندات	مرکز راهنمایی	مستندات توسعه دهنده
اخبار و به روز رسانی	در Data Studio > تنظیمات کاربر ثبت نام کنید	لیست پستی برنامه نویس
سوال بپرسید	انجمن کاربر	سرریز پشته [google-data-studio] انجمن توسعه دهندگان Data Studio
ویدیوها	Data Studio در یوتیوب	به زودی!
نمونه ها	گالری گزارش	مخزن منبع باز

ایجاد تجسم جاوا اسکریپت سفارشی در Data Studio با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.

چیزی که یاد خواهید گرفت

آنچه شما نیاز دارید

چرا این کد لبه را انتخاب کردید؟

چگونه می خواهید از این نرم افزار / آموزش استفاده کنید؟

تجربه خود را با Data Studio چگونه ارزیابی می کنید؟

چه چیزی پیشینه شما را بهتر توصیف می کند؟

به چه کتابخانه های تجسم جاوا اسکریپت علاقه دارید؟

منبع تجسم را بنویسید

myVizSource.js

فایل جاوا اسکریپت نهایی را آماده کنید

اسکریپت الحاق لینوکس/مک OS

اسکریپت ویندوز

myViz.css

myViz.json

manifest.json

دستورات آپلود gsutil

myVizSource.js

myVizSource.js

myVizSource.js

تجسم خود را گسترش دهید

با تجسم های جامعه کارهای بیشتری انجام دهید

منابع اضافی

ایجاد تجسم جاوا اسکریپت سفارشی در Data Studio