此页面由 Cloud Translation API 翻译。

在数据洞察中创建自定义 JavaScript 可视化图表

借助 Google 数据洞察，用户可以免费构建具有精美数据可视化效果的实时交互式信息中心。用户可以从各种来源提取数据，并在数据洞察中创建报告，同时还可使用完整的修改和共享功能。以下是数据洞察信息中心示例：

Data Studio 提供多种内置图表类型，包括折线图、条形图、饼图和散点图。借助社区可视化图表，您可以在数据洞察中构建和使用自己的自定义 JavaScript 可视化图表。社区可视化图表由数据洞察开发者社区构建，任何开发者都可以构建。您还可以与他人分享自己的社区可视化图表，以便他们将这些图表用于自己的数据。

学习内容

在此 Codelab 中，您将学习：

Google 数据洞察社区可视化图表的工作原理
如何使用 ds-component 辅助库构建社区可视化图表
如何将社区可视化图表集成到数据洞察信息中心

所需条件

如需完成本 Codelab，您需要：

可连接到互联网的设备和网络浏览器
Google 账号
对 Google Cloud Platform 存储分区的访问权限
熟悉 JavaScript

您为何选择此 Codelab？

我对数据可视化总体上感兴趣。

我想详细了解数据洞察

我想构建自己的社区可视化图表。

我正在尝试将数据洞察与其他平台集成。

我对 Google Cloud 解决方案感兴趣。

您打算如何使用本 Codelab/教程？

仅浏览

阅读并完成练习

您如何评价自己使用数据洞察的体验？

从未听说过

我知道是什么，但我不使用它。

我偶尔会使用它。

我经常使用它。

我是专家级用户。

哪项描述最符合您的背景？

开发者

设计师 / 用户体验专家

业务 / 数据 / 财务分析师

数据科学家 / 数据工程师

营销 / 社交媒体 / 数字分析专家

其他

您对哪些 JavaScript 可视化图表库感兴趣？

D3.js

Google Charts

Chart.js

Leaflet

Highcharts

Plot.ly

其他

前往下一页提交调查信息。

借助数据洞察社区可视化图表，您可以创建和使用集成到信息中心中的自定义 JavaScript 可视化图表。

在此 Codelab 中，您将创建一个支持 1 个维度、1 项指标和条形图颜色样式的条形图社区可视化图表。

如需创建社区可视化图表，您需要在 Google Cloud Platform 存储分区中准备以下文件，您将在后续步骤中创建该存储分区。

文件名	文件类型	用途
manifest.json*	JSON	提供有关可视化图表的元数据以及其他资源的位置。
myViz.json	JSON	为“属性”面板提供数据和样式配置选项。
myViz.js	JavaScript	提供显示可视化图表所需的 JavaScript 代码。
myViz.css（可选）	CSS	为可视化图表提供样式。

*清单是唯一具有必需名称的文件。其他文件的命名可以不同，只要其名称/位置在清单文件中指定即可。

在本部分中，您将向 JavaScript 文件添加处理数据、样式更改和可视化渲染所需的代码。

编写可视化图表来源

第 1 步： 从数据洞察社区组件库下载 dscc.min.js 文件，并将其复制到您的工作目录。

第 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 步： 通过将可视化图表辅助库 (dscc.min.js) 和 myVizSource.js 文件的内容复制到名为 myViz.js 的新文件中，将所有必需的 JavaScript 合并到一个文件中。运行以下命令来连接文件。每次更新可视化图表代码时，都要重复执行此步骤。

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 步： 创建 GCP 存储分区。建议的存储类别为 Regional。如需详细了解免费层级，请访问 Cloud Storage 价格。您的可视化图表存储空间不太可能产生任何区域级存储类别费用。

第 3 步：记下您的存储分区名称/路径，从 Buckets/ 之后的这一部分开始。数据洞察将此位置称为“组件 ID”，它将用于识别和部署。

清单文件提供有关可视化图表位置和资源的信息。它必须命名为“manifest.json”，并且必须位于上一步中创建的存储分区中（与用于组件 ID 的存储分区相同）。

将以下代码复制到文本编辑器中，然后将其保存为 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"
    }
  }]
}

使用网页界面或 gsutil 命令行工具将 manifest.json、myViz.js、myViz.json 和 myViz.css 文件上传到 Google Cloud Storage 存储分区。每次更新可视化图表时，都要重复此操作。

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，然后点击开始创建新的报告下的空白。

第 3 步：点击右下角的新建数据源。

第 4 步：选择 Google 表格连接器。

第 5 步：在网址字段中，输入您在上文第 1 步中创建的 Google 表格的网址。

第 6 步：点击页面右上角的关联

第 7 步：在数据源标题中，点击社区可视化图表访问权限，选择开启，然后点击保存。

第 7 步：点击随即显示的框中的添加到报告，将相应数据源添加到报告中。

第 6 步： 点击工具栏中的社区可视化图表按钮。系统随即会打开一个下拉菜单。

第 7 步：将以 gs:// ( 为前缀的存储分区名称（例如：gs://community-viz-docs/myViz)）粘贴到“清单路径”的文本输入框中，在“组件 ID”下添加 barChart，然后点击“添加”。

系统会自动在画布上绘制可视化图表。右侧的属性面板应反映 myViz.json 文件中的元素。

该图表支持使用 1 个维度和 1 项指标。

指定了一个样式元素 - 渲染了一个标记为“条形颜色”的字体颜色选择器。在下一步中，您将使用此选择器来影响可视化图表。

在本部分中，您将使用颜色选择器样式元素来更新可视化图表。

第 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 步： 刷新您测试社区可视化图表的数据洞察报告。

您应该能够使用样式菜单中的选择器更改矩形的颜色。

在本部分中，您将更新可视化图表，以使用社区可视化图表示例数据集中的数据绘制条形图。注意：数据洞察最多会向可视化图表返回 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 步： 刷新您测试社区可视化图表的数据洞察报告。您应该会看到一个条形图，其中包含根据 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 步： 刷新您测试社区可视化图表的数据洞察报告。您应该会看到一个条形图，其标题是根据数据生成的，样式是使用 myViz.css 文件设置的。

恭喜！您已在数据洞察中创建了社区可视化图表。至此，本 Codelab 已结束。现在，让我们看看您可以采取哪些后续步骤。

扩展可视化图表

为可视化图表添加互动
了解如何在本地开发可视化图表
详细了解可用的样式元素，并为可视化图表添加其他样式。

利用社区可视化图表执行更多操作

查看 dscc 辅助库、清单和配置文件的相关参考信息。
将您的可视化图表提交到我们的社区可视化图表展示区。
为数据洞察构建社区连接器。

其他资源

下面列出了各种资源，可帮助您深入了解本 Codelab 中涵盖的材料。

资源类型	用户功能	开发者功能
文档	帮助中心	开发者文档
新闻和最新动态	在数据洞察 > 用户设置中注册	开发者邮寄名单
提问	用户论坛	Stack Overflow [google-data-studio] 数据洞察开发者论坛
视频	YouTube 上的数据洞察	即将推出！
示例	报告库	开源代码库

在数据洞察中创建自定义 JavaScript 可视化图表 使用集合让一切井井有条 根据您的偏好保存内容并对其进行分类。

学习内容

所需条件

您为何选择此 Codelab？

您打算如何使用本 Codelab/教程？

您如何评价自己使用数据洞察的体验？

哪项描述最符合您的背景？

您对哪些 JavaScript 可视化图表库感兴趣？

编写可视化图表来源

myVizSource.js

准备最终的 JavaScript 文件

Linux/Mac OS 连接脚本

Windows 脚本

myViz.css

myViz.json

manifest.json

gsutil 上传命令

myVizSource.js

myVizSource.js

myVizSource.js

扩展可视化图表

利用社区可视化图表执行更多操作

其他资源

在数据洞察中创建自定义 JavaScript 可视化图表