在 Looker Studio 中创建自定义可视化图表

1. 简介

借助 Looker Studio，您可以免费构建具有精美数据可视化图表的实时交互式信息中心。在 Looker Studio 中从各种来源提取数据，并创建无限数量的报告，同时还可使用完整的编辑和共享功能。以下屏幕截图是 Looker Studio 报告示例：

（点击此处可在 Looker Studio 中查看此示例报告）

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

学习内容

在此 Codelab 中，您将学习：

Looker Studio 社区可视化图表的运作方式。
如何使用 ds-component 帮助程序库 (dscc) 构建社区可视化图表。
如何在 Looker Studio 报告中使用社区可视化图表。

所需条件

如需完成本 Codelab，您需要：

能够访问互联网和网络浏览器。
Google 账号
对 Google Cloud Platform 存储分区的访问权限。
熟悉 JavaScript。

2. 简短调查问卷

您为何选择此 Codelab？

我对数据可视化很感兴趣。

我想详细了解 Looker Studio。

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

我正在尝试将 Looker Studio 与其他平台集成。

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

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

仅供浏览。

阅读并完成练习。

您如何评价自己在 Looker Studio 方面的经验水平？

从未听说过。

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

我偶尔会使用它。

我经常使用它。

我是专家级用户。

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

开发者。

设计师 / 用户体验专家。

业务 / 数据 / 财务分析师。

数据科学家 / 数据工程师。

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

其他。

您有兴趣使用哪些 JavaScript 可视化图表库？

D3.js

Google 图表

Chart.js

Leaflet

Highcharts

Plot.ly

其他

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

3. 社区可视化图表概览

借助 Looker Studio 社区可视化图表，您可以在信息中心内创建和使用自定义 JavaScript 可视化图表。

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

4. 社区可视化图表开发工作流程

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

文件名	文件类型	用途
manifest.json*	JSON	有关可视化图表的元数据以及所有可视化图表资源的位置。
viz-codelab.json	JSON	属性面板的数据和样式配置选项。
viz-codelab.js	JavaScript	用于呈现可视化图表的 JavaScript 代码。
viz-codelab.css（可选）	CSS	可视化图表的 CSS 样式。

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

5. 编写“Hello, world!”可视化图表

在本部分中，您将添加呈现简单的“Hello, world!”可视化效果所需的代码。

编写可视化图表 JavaScript 源代码

第 1 步：从 Looker Studio 社区组件库 (dscc) 页面下载 dscc.min.js 文件，并将其复制到您的工作目录。

第 2 步：将以下代码复制到文本编辑器中，并将其另存为本地工作目录中的 viz-codelab-src.js。

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Render the viz.
  container.textContent = 'Hello, viz world!';

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

准备 JavaScript 软件包文件

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

Linux/Mac OS 连接脚本

cat dscc.min.js > viz-codelab.js
echo >> viz-codelab.js
cat viz-codelab-src.js >> viz-codelab.js

Windows 连接脚本

del viz-codelab.js
type nul > viz-codelab.js
type dscc.min.js >> viz-codelab.js
echo.>> viz-codelab.js
type viz-codelab-src.js >> viz-codelab.js

6. 编写可视化图表 CSS

CSS 文件用于定义可视化图表的样式，是可选的。复制以下 CSS 并将其保存为 viz-codelab.css.

viz-codelab.css

table {
    width: 100%;
    border-collapse: collapse;
}

tr {
    border-bottom: 1pt solid #d1d1d1;
}

th, td {
    padding: 8px;
    text-align: left;
}

7. 编写 JSON 配置

可视化图表配置定义了可视化图表支持和所需的数据和样式属性。此 Codelab 中的这种可视化图表需要一个维度和一个指标，并且有一个样式元素用于选择填充颜色。详细了解维度和指标。

复制以下代码并将其另存为 viz-codelab.json. 如需详细了解您可以配置的属性，请参阅社区可视化图表配置参考文档。

viz-codelab.json

{
    "data": [
        {
            "id": "concepts",
            "label": "Concepts",
            "elements": [
                {
                    "id": "tableDimension",
                    "label": "Dimension",
                    "type": "DIMENSION",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                },
                {
                    "id": "tableMetric",
                    "label": "Metric",
                    "type": "METRIC",
                    "options": {
                        "min": 1,
                        "max": 1
                    }
                }
            ]
        }
    ],
    "style": [
        {
            "id": "header",
            "label": "Table Header",
            "elements": [
                {
                    "type": "FILL_COLOR",
                    "id": "headerBg",
                    "label": "Header Background Color",
                    "defaultValue": "#e0e0e0"
                }
            ]
        }
    ]
}

8. 创建 Cloud Storage 项目和存储分区

第 1 步： 创建 Google Cloud Platform (GCP) 项目或使用现有项目。

第 2 步： 创建 GCP 存储分区。建议的存储类别为 Regional。如需详细了解免费层级，请访问 Cloud Storage 价格。注意：对于区域级存储类别，您的可视化图表存储空间不太可能会产生任何费用。

第 3 步：记下您的存储分区名称/路径，从 Buckets/ 之后的这一部分开始。该路径在 Looker Studio 中称为“组件 ID”，用于识别和部署可视化图表。

9. 编写 manifest.json 文件

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

将以下代码复制到文本编辑器中，然后将其保存为 manifest.json.

如需详细了解清单，请参阅清单参考文档。

manifest.json

{
    "name": "Community Visualization",
    "logoUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
    "organization": "Looker Studio Codelab",
    "organizationUrl": "https://url",
    "termsOfServiceUrl": "https://url",
    "supportUrl": "https://url",
    "packageUrl": "https://url",
    "privacyPolicyUrl": "https://url",
    "description": "Community Visualization Codelab",
    "devMode": true,
    "components": [
        {
            "id": "tableChart",
            "name": "Table",
            "iconUrl": "https://raw.githubusercontent.com/googledatastudio/community-visualizations/master/docs/codelab/img/table-chart.png",
            "description": "A simple table chart.",
            "resource": {
                "js": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.js",
                "config": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.json",
                "css": "gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET/viz-codelab.css"
            }
        }
    ]
}

10. 将可视化图表文件上传到 Google Cloud Storage

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

gsutil 上传命令

gsutil cp -a public-read manifest.json gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET
gsutil cp -a public-read viz-codelab.* gs://MY_GOOGLE_CLOUD_STORAGE_BUCKET

11. 在 Looker Studio 中测试社区可视化图表

创建报告并添加数据

第 1 步：复制社区可视化图表示例数据集的网址。或者，您也可以使用自己喜欢的任何数据源，并跳过以下步骤。

第 2 步： 登录 Looker Studio。点击左上角的 + 创建，然后选择报告。

第 3 步：您会看到报告编辑器工具，其中将数据添加到报告面板处于打开状态。

第 4 步：在连接到数据标签页中，选择 Google 提供的 Google 表格连接器。

第 5 步：选择网址，然后粘贴第 1 步中的 Google 表格网址。

第 6 步：点击右下角的添加。

第 7 步：如果系统提示您确认您即将向此报告添加数据，请点击添加到报告。系统会创建一个“无标题报告”，并向该报告添加一个包含示例数据的默认表格。（可选）选择并删除默认表格，以便您获得空白报告。

将社区可视化图表添加到报告中

第 1 步：在工具栏中，点击“社区可视化图表和组件”图标。

第 2 步：点击 + 探索更多以打开“社区资源库”。

第 3 步：点击构建您自己的可视化图表

第 4 步：在测试并添加您的社区可视化图表下，输入清单路径，然后点击提交。清单路径是指指向可视化图表清单所在位置的 Google Cloud Storage 存储分区名称和路径，并以 gs://. 为前缀。例如：gs://community-viz-docs/viz-codelab。如果您已输入有效的清单路径，系统应会呈现可视化图表卡片。

第 5 步：点击可视化图表卡片，将其添加到报告中。

第 6 步：如果系统提示，请授予同意书以允许渲染可视化图表。

第 7 步：（可选）更新表格的所选维度和指标。如果您使用的是提供的示例数据集，请将维度设置为国家/地区，并将指标设置为人口。在 Codelab 的后续部分中，此操作才会对可视化图表产生影响。

右侧的属性面板会反映在 viz-codelab.json 中配置的元素。

在设置面板下，该可视化图表允许使用一个维度和一个指标。

在样式面板中，可视化图表包含一个用于设置表格标题样式的元素。此时，样式控件不会对可视化图表产生任何影响，直到在后续步骤中更新可视化图表代码为止。注意：您会看到可视化图表中显示了您未在配置文件中定义的其他样式选项。这是预期行为，因为所有可视化图表都有一组自动提供的通用控件。

12. 以表格形式呈现数据

在本部分中，您将更新可视化图表，以表格形式显示社区可视化图表示例数据集。

要呈现的数据位于 tables 对象中，并根据可视化图表指定的转换进行结构化。在此 Codelab 中，可视化图表请求了表格格式 (tableTransform)，其中包括 headers 对象和 rows 对象，其中包含渲染表格所需的所有数据。

第 1 步：将 viz-codelab-src.js 的内容替换为以下代码。

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

第 2 步：准备 JavaScript 软件包文件，然后将可视化文件上传到 Google Cloud Storage 并覆盖现有文件。

第 3 步：刷新 Looker Studio 报告，以重新加载并测试您的社区可视化图表。表格现在会呈现数据（即 Google 表格），并根据所选维度和指标显示标题列。调整可视化图表的大小，以查看所有行。

13. 动态应用样式更改

在本部分中，您将更新可视化图表，以根据样式面板中选择的填充颜色设置表格标题的样式。

所有样式元素的状态都可在 style 对象中找到，其中每个项键都根据您的可视化图表样式配置 (viz-codelab.json) 进行定义。在本部分中，您将获取所选的填充颜色，并使用该颜色更新表格标题的背景颜色。

第 1 步：将 viz-codelab-src.js 文件中的代码替换为以下代码。

viz-codelab-src.js

function drawViz(data) {

  // Container setup.
  let container = document.getElementById('container');
  if (container) {
    container.textContent = '';
  } else {
    container = document.createElement('div')
    container.id = 'container'
    document.body.appendChild(container);
  }

  // Create the table.
  const table = document.createElement('table');
  const tableHeader = document.createElement('thead');
  const tableBody = document.createElement('tbody');

  data.tables.DEFAULT.headers.forEach(function (column) {
    const tableColumn = document.createElement('th');
    tableColumn.textContent = column.name;
    tableHeader.appendChild(tableColumn);
  });

  data.tables.DEFAULT.rows.forEach(function(row) {
    const tableRow = document.createElement('tr');
    row.forEach(function(cell) {
      const tableCell = document.createElement('td');
      if (typeof cell == 'number') {
        tableCell.textContent = new Intl.NumberFormat().format(cell);
      } else {
        tableCell.textContent = cell;
      }
      tableRow.appendChild(tableCell);
    });
    tableBody.appendChild(tableRow);
  });
  table.appendChild(tableHeader);
  table.appendChild(tableBody);

  // Set header color based on style control.
  tableHeader.style.backgroundColor = data.style.headerBg.value.color;

  // Render the table.
  container.appendChild(table);

}

// Subscribe to data and style changes. Use the table format for data.
dscc.subscribeToData(drawViz, { transform: dscc.tableTransform });

第 2 步：准备 JavaScript 软件包文件，然后将可视化文件上传到 Google Cloud Storage 并覆盖现有文件。

第 3 步：刷新 Looker Studio 报告，以重新加载并测试您的社区可视化图表。

第 4 步：在样式面板中，使用标题背景颜色样式控件更改表格标题背景颜色。

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

14. 后续步骤

扩展可视化图表

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

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

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

其他资源

以下是各种资源，可帮助您深入了解本 Codelab 所涵盖的内容。

资源类型	用户功能	开发者功能
文档	帮助中心	开发者文档
新闻和最新动态	在 Looker Studio 中注册 > 用户设置	开发者邮寄名单
提问	用户论坛	Stack Overflow [looker-studio] Looker Studio 开发者论坛
示例	报告库	开源代码库

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

1. 简介

学习内容

所需条件

2. 简短调查问卷

您为何选择此 Codelab？

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

您如何评价自己在 Looker Studio 方面的经验水平？

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

您有兴趣使用哪些 JavaScript 可视化图表库？

3. 社区可视化图表概览

4. 社区可视化图表开发工作流程

5. 编写“Hello, world!”可视化图表

编写可视化图表 JavaScript 源代码

viz-codelab-src.js

准备 JavaScript 软件包文件

Linux/Mac OS 连接脚本

Windows 连接脚本

6. 编写可视化图表 CSS

viz-codelab.css

7. 编写 JSON 配置

viz-codelab.json

8. 创建 Cloud Storage 项目和存储分区

9. 编写 manifest.json 文件

manifest.json

10. 将可视化图表文件上传到 Google Cloud Storage

gsutil 上传命令

11. 在 Looker Studio 中测试社区可视化图表

创建报告并添加数据

将社区可视化图表添加到报告中

12. 以表格形式呈现数据

viz-codelab-src.js

13. 动态应用样式更改

viz-codelab-src.js

14. 后续步骤

扩展可视化图表

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

其他资源

在 Looker Studio 中创建自定义可视化图表