Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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

1. 简介

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

( 点击此处可在数据洞察中查看此示例报告)

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

学习内容

在本代码实验中，您将学习：

数据洞察社区可视化图表的工作原理。
如何使用 ds-component 帮助程序库 (dscc) 构建社区可视化图表。
如何在数据洞察报告中使用社区可视化图表。

所需条件

如需完成本代码实验，您需要：

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

2. 简短调查问卷

您为何选择此 Codelab？

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

我想详细了解数据洞察。

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

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

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

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

仅浏览。

阅读并完成练习。

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

从未听说过。

我知道是什么，但未使用过。

偶尔使用。

经常使用。

我是专家级用户。

下面哪一项与您的背景最相符？

开发者。

设计师 / 用户体验专家。

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

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

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

其他。

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

D3.js

Google 图表

Chart.js

Leaflet

Highcharts

Plot.ly

其他

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

3. 社区可视化图表概览

借助数据洞察社区可视化图表，您可以在信息中心内创建和使用自定义 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 步：从数据洞察社区组件库 (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/macOS 连接脚本

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 价格。注意：对于 Regional Storage 存储类别，您的可视化图表存储不太可能会产生任何费用。

第 3 步：记下您的存储分区名称/路径，从 Buckets/ 后的部分开始。该路径在数据洞察中称为“组件 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": "Data 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

使用 Web 界面或 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. 在数据洞察中测试社区可视化图表

创建报告并添加数据

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

第 2 步： 登录数据洞察。点击左上角的 + 创建 ，然后选择报告。

第 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 步：刷新数据洞察报告，以重新加载并测试社区可视化图表。表格现在会呈现数据（即 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 步：刷新数据洞察报告，以重新加载并测试社区可视化图表。

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

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

14. 后续步骤

扩展可视化图表

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

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

查看 dscc 帮助程序库、清单和配置文件的参考。
将可视化图表提交到我们的社区可视化图库。
构建一个社区连接器用于数据洞察。

其他资源

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

资源类型	用户功能	开发者功能
文档	帮助中心	开发者文档
最新资讯和动态	在数据洞察中注册 > 用户设置	开发者邮件列表
提问	用户论坛	Stack Overflow [data-studio] 数据洞察开发者论坛
示例	报告库	开源代码库

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

1. 简介

学习内容

所需条件

2. 简短调查问卷

您为何选择此 Codelab？

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

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

下面哪一项与您的背景最相符？

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

3. 社区可视化图表概览

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

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

编写可视化图表 JavaScript 源代码

viz-codelab-src.js

准备 JavaScript 软件包文件

Linux/macOS 连接脚本

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. 在数据洞察中测试社区可视化图表

创建报告并添加数据

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

12. 将数据呈现为表格

viz-codelab-src.js

13. 动态应用样式更改

viz-codelab-src.js

14. 后续步骤

扩展可视化图表

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

其他资源

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