تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إنشاء تصورات مخصّصة باستخدام JavaScript في "مركز البيانات"

تتيح أداة استوديو البيانات من Google للمستخدمين إنشاء لوحات بيانات تفاعلية مباشرة تتضمّن عروضًا مرئية رائعة للبيانات، وذلك مجانًا. يمكن للمستخدمين استرداد بياناتهم من مجموعة متنوعة من المصادر وإنشاء تقارير في "مركز البيانات"، مع إمكانات التعديل والمشاركة الكاملة. في ما يلي مثال على لوحة بيانات في "مركز البيانات":

(انقر هنا للاطّلاع على نموذج هذا التقرير في "مركز البيانات")

توفّر "استوديو بيانات Google" العديد من أنواع الرسوم البيانية المضمّنة، بما في ذلك الرسوم البيانية الخطية والشريطية والدائرية والرسوم البيانية بالنقاط المبعثرة. تتيح لك الرسومات البيانية من إنشاء المجتمع إنشاء رسومات بيانية مخصّصة باستخدام JavaScript واستخدامها في "مركز البيانات". تم إنشاء الرسومات البيانية المجتمعية من قِبل منتدى مطوّري Data Studio، ويمكن لأي مطوّر إنشاء رسم بياني. يمكنك أيضًا مشاركة العروض المرئية الخاصة بالمنتدى مع الآخرين ليتمكّنوا من استخدامها مع بياناتهم.

أهداف الدورة التعليمية

في هذا الدرس العملي، سنتعرّف على ما يلي:

طريقة عمل عرض مرئي من إنشاء المنتدى في "مركز البيانات من Google"
كيفية إنشاء عرض مرئي لبيانات المنتدى باستخدام مكتبة ds-component المساعدة
كيفية دمج التمثيل المرئي الخاص بالمنتدى في لوحة بيانات "مركز البيانات"

المتطلبات

لإكمال هذا الدرس التطبيقي، ستحتاج إلى:

إمكانية الوصول إلى الإنترنت ومتصفّح ويب
حساب Google
الوصول إلى حزمة تخزين في Google Cloud Platform
الإلمام بلغة JavaScript

لماذا اخترت هذا الدرس التطبيقي حول الترميز؟

أنا مهتم بتصوير البيانات بشكل عام.

أريد معرفة المزيد عن "مركز البيانات"

أريد إنشاء "مرئيات المنتدى" الخاصة بي

أحاول دمج "مركز البيانات" مع منصة أخرى.

أنا مهتم بحلول Google Cloud.

كيف تخطّط لاستخدام هذا الدرس العملي أو التعليمي؟

التصفّح السريع فقط

القراءة وإكمال التمارين

ما هو تقييمك لتجربتك مع "مركز البيانات"؟

لم أسمع بها من قبل

أعرفها ولكنّي لا أستخدمها

أستخدمه من حين لآخر.

أستخدمها بانتظام.

أنا مستخدم خبير.

ما هو الوصف الأنسب لخلفيتك؟

مطوّر

مصمّم / متخصص في تجربة المستخدم

محلّل أعمال / بيانات / مالي

عالم بيانات / مهندس بيانات

خبير في التسويق / وسائل التواصل الاجتماعي / التحليلات الرقمية

غير ذلك

ما هي مكتبات العرض المرئي JavaScript التي تهمّك؟

D3.js

Google Charts

Chart.js

Leaflet

Highcharts

Plot.ly

غير ذلك

انتقِل إلى الصفحة التالية لإرسال معلومات الاستطلاع.

تتيح لك الرسومات البيانية من المنتدى في "مركز البيانات" إنشاء رسومات بيانية مخصّصة بلغة JavaScript واستخدامها، وهي تتكامل مع لوحات البيانات.

في هذا الدرس العملي، ستنشئ تمثيلاً بصريًا للمخطط الشريطي خاصًا بالمجتمع يتيح استخدام سمة واحدة ومقياس واحد ونمط لون الشريط.

لإنشاء تصور من إنشاء المنتدى، يجب توفير الملفات التالية في حزمة تخزين على 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

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 الخاص بإعدادات التصور سمات البيانات والأنماط التي يتيحها التصور ويتطلّبها. يتيح هذا التمثيل البصري الذي ستنشئه في هذا الدرس التطبيقي حول الترميز استخدام بُعد واحد ومقياس واحد، ويتطلّب عنصر نمط واحد لاختيار لون. مزيد من المعلومات عن السمات والمقاييس

انسخ الرمز التالي واحفظه باسم 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: إنشاء حزمة في Google Cloud Platform فئة التخزين المقترَحة هي "إقليمية". يمكنك الانتقال إلى أسعار Cloud Storage للاطّلاع على تفاصيل حول المستويات المجانية. من غير المرجّح أن تتكبّد أي تكاليف مقابل مساحة تخزين العرض المرئي لفئة التخزين الإقليمية.

الخطوة 3: دوِّن اسم/مسار الحزمة، بدءًا من القسم الذي يلي Buckets/ . يُطلق "مركز البيانات" على ذلك اسم "معرّف المكوّن"، وسيتم استخدامه لتحديد المكوّن ونشره.

يوفّر ملف البيان معلومات حول موقع العرض المرئي والموارد. يجب أن يكون اسمه "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: انتقِل إلى مركز البيانات وانقر على فارغ ضمن بدء تقرير جديد.

الخطوة 3: في أسفل يسار الصفحة، انقر على إنشاء مصدر بيانات جديد.

الخطوة 4: اختَر أداة ربط جداول بيانات Google.

الخطوة 5: في حقل عنوان URL، أدخِل عنوان URL لجدول بيانات Google من الخطوة 1 أعلاه.

الخطوة 6: في أعلى يسار الصفحة، انقر على ربط.

الخطوة 7: في عنوان مصدر البيانات، انقر على الوصول إلى الرسومات البيانية من "المنتدى"، ثم اختَر تفعيل، وانقر على حفظ.

الخطوة 7: انقر على إضافة إلى التقرير في المربّع الذي يظهر لإضافة مصدر البيانات إلى تقريرك.

الخطوة 6: في شريط الأدوات، انقر على زر "التصوّر من إعداد المنتدى" . سيؤدي ذلك إلى فتح قائمة منسدلة.

الخطوة 7: ألصِق اسم الحزمة مسبوقًا بـ 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 الذي اختبرت فيه التمثيل المرئي الخاص بالمنتدى.

من المفترض أن تتمكّن من تغيير لون المستطيل باستخدام أداة الاختيار في قائمة الأنماط.

في هذا القسم، ستعدّل التصور لإنشاء مخطط شريطي باستخدام البيانات من مجموعة البيانات النموذجية الخاصة بـ "تصور البيانات في المنتدى". ملاحظة: تعرض أداة "استوديو البيانات" 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". لتغيير لون الأشرطة، غيِّر اللون المحدّد في أداة اختيار "لون الشريط" "لون الشريط" ضمن "النمط".

في هذا القسم، ستعدّل التصور لإنشاء مخطط شريطي باستخدام البيانات من مجموعة البيانات النموذجية الخاصة بـ "تصور البيانات في المنتدى".

الخطوة 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.

تهانينا، لقد أنشأت عرضًا مرئيًا من إنشاء المنتدى في "مركز البيانات". بهذا نكون قد وصلنا إلى نهاية هذا الدرس العملي. لنطّلع الآن على الخطوات التالية التي يمكنك اتّخاذها.

توسيع نطاق التصوّر

إضافة تفاعلات إلى التمثيل البصري
كيفية تطوير تمثيل مرئي محليًا
مزيد من المعلومات عن عناصر الأنماط المتاحة وإضافة أنماط إضافية إلى التمثيل المرئي

إنجاز المزيد باستخدام الرسومات البيانية من إعداد المنتدى

راجِع مراجع مكتبة أدوات المساعدة في DSCC وملف البيان وملف الإعداد.
إرسال التمثيل المرئي إلى معرض العروض المرئية من المنتدى
إنشاء موصّل بيانات من إنشاء المنتدى لأداة "مركز البيانات"

مراجع إضافية

في ما يلي مراجع مختلفة يمكنك الوصول إليها لمساعدتك في التعرّف بشكل أكبر على المواد التي تم تناولها في هذا الدرس العملي.

نوع المرجع	ميزات المستخدم	ميزات المطوّرين
الوثائق	مركز المساعدة	مستندات المطوّرين
الأخبار والتحديثات	الاشتراك في مركز البيانات > إعدادات المستخدم	القائمة البريدية للمطوّرين
طرح أسئلة	منتدى المستخدمين	‫Stack Overflow [google-data-studio] منتدى مطوّري "مركز البيانات"
الفيديوهات	"مركز البيانات" على YouTube	قريبًا!
أمثلة	معرض التقارير	مستودع البرامج المفتوحة المصدر

إنشاء تصورات مخصّصة باستخدام JavaScript في "مركز البيانات" تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

أهداف الدورة التعليمية

المتطلبات

لماذا اخترت هذا الدرس التطبيقي حول الترميز؟

كيف تخطّط لاستخدام هذا الدرس العملي أو التعليمي؟

ما هو تقييمك لتجربتك مع "مركز البيانات"؟

ما هو الوصف الأنسب لخلفيتك؟

ما هي مكتبات العرض المرئي JavaScript التي تهمّك؟

كتابة مصدر المرئيات

myVizSource.js

إعداد ملف JavaScript النهائي

نص الربط في نظام التشغيل Linux/Mac

نص برمجي لنظام التشغيل Windows

myViz.css

myViz.json

manifest.json

أوامر التحميل في gsutil

myVizSource.js

myVizSource.js

myVizSource.js

توسيع نطاق التصوّر

إنجاز المزيد باستخدام الرسومات البيانية من إعداد المنتدى

مراجع إضافية

إنشاء تصورات مخصّصة باستخدام JavaScript في "مركز البيانات"