Javascript Looker自定义可视化

我想做一个自定义可视化，将第一行的两个度量值相加并显示值。为此，我使用了looker本身提供的HelloWorld代码，只做了一些更改（红色文本）。但我无法得到预期的结果，它只给出了未定义的输出

这是我的密码：-

looker.plugins.visualizations.add({
  // Id and Label are legacy properties that no longer have any function besides documenting
  // what the visualization used to have. The properties are now set via the manifest
  // form within the admin/visualizations page of Looker
  id: "hello_world",
  label: "Hello World",
  options: {
    font_size: {
      type: "string",
      label: "Font Size",
      values: [
        {"Large": "large"},
        {"Small": "small"}
      ],
      display: "radio",
      default: "large"
    }
  },
  // Set up the initial state of the visualization
  create: function(element, config) {

    // Insert a <style> tag with some styles we'll use later.
    element.innerHTML = `
      <style>
        .hello-world-vis {
          /* Vertical centering */
          height: 100%;
          display: flex;
          flex-direction: column;
          justify-content: center;
          text-align: center;
        }
        .hello-world-text-large {
          font-size: 72px;
        }
        .hello-world-text-small {
          font-size: 18px;
        }
      </style>
    `;

    // Create a container element to let us center the text.
    var container = element.appendChild(document.createElement("div"));
    container.className = "hello-world-vis";

    // Create an element to contain the text.
    this._textElement = container.appendChild(document.createElement("div"));

  },
  // Render in response to the data or settings changing
  updateAsync: function(data, element, config, queryResponse, details, done) {

    // Clear any errors from previous updates
    this.clearErrors();

    // Throw some errors and exit if the shape of the data isn't what this chart needs
    if (queryResponse.fields.dimensions.length == 0) {
      this.addError({title: "No Dimensions", message: "This chart requires dimensions."});
      return;
    }

    // Grab the first cell of the data
    var firstRow = data[0];
    var secondRow = data[0];
    var firstCell = firstRow[queryResponse.fields.measures[0].name];
    var secondCell =secondRow[queryResponse.fields.measures[1].name];
    var totalSat = firstCell+secondCell;

    // Insert the data into the page
    this._textElement.innerHTML = LookerCharts.Utils.htmlForCell(totalSat);

    // Set the size to the user-selected size
    if (config.font_size == "small") {
      this._textElement.className = "hello-world-text-small";
    } else {
      this._textElement.className = "hello-world-text-large";
    }

    // We are done rendering! Let Looker know.
    done()
  }
});

looker.plugins.visualizations.add({
//Id和标签是旧式属性，除了记录外不再具有任何功能
//可视化过去的功能。现在通过清单设置属性
//Looker的管理/可视化页面中的表单
id:“你好，世界”，
标签：“你好，世界”，
选项：{
字体大小：{
键入：“字符串”，
标签：“字体大小”，
价值观：[
{“大”：“大”}，
{“小”：“小”}
],
显示：“收音机”，
默认值：“大”
}
},
//设置可视化的初始状态
创建：函数（元素，配置）{
//插入带有我们稍后将使用的某些样式的标记。
element.innerHTML=`
.你好，世界维斯{
/*垂直定心*/
身高：100%；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
文本对齐：居中；
}
.hello world文本大{
字体大小：72px；
}
.你好，世界文字小{
字号：18px；
}
`;
//创建一个容器元素以使文本居中。
var container=element.appendChild（document.createElement（“div”））；
container.className=“hello world vis”；
//创建包含文本的元素。
this._textElement=container.appendChild（document.createElement（“div”）；
},
//根据数据或设置的更改进行渲染
updateSync:函数（数据、元素、配置、查询响应、详细信息、完成）{
//清除以前更新中的所有错误
这个.clearErrors（）；
//如果数据的形状不是此图表所需的，则抛出一些错误并退出
if（queryResponse.fields.dimensions.length==0）{
addError（{标题：“无维度”，消息：“此图表需要维度。”}）；
返回；
}
//抓取数据的第一个单元格
var firstRow=数据[0]；
var secondRow=数据[0]；
var firstCell=firstRow[queryResponse.fields.measures[0].name]；
var secondCell=secondRow[queryResponse.fields.measures[1].name]；
var totalSat=第一个单元格+第二个单元格；
//将数据插入页面
这是._textElement.innerHTML=LookerCharts.Utils.htmlForCell（totalSat）；
//将大小设置为用户选择的大小
如果（config.font_size==“小”）{
这是。_textElement.className=“hello world text small”；
}否则{
这是。_textElement.className=“hello world text large”；
}
//我们完成渲染了！请让观者知道。
完成（）
}
});

为什么不进行自定义表格计算以进行加法，并进行单值可视化以可视化结果？或者出于其他原因要进行自定义可视化

---

第一步应该是使用表计算对其他字段进行添加和“隐藏可视化”，以便仅将一个字段值传递给可视化。然后，可视化将更加直观。

这几乎是完美的！问题在于这些方面：

    var firstCell = firstRow[queryResponse.fields.measures[0].name];
    var secondCell =secondRow[queryResponse.fields.measures[1].name];
    var totalSat = firstCell+secondCell;

    // Insert the data into the page
    this._textElement.innerHTML = LookerCharts.Utils.htmlForCell(totalSat);

在这里，您试图获取感兴趣的单元格，然后将它们添加到一起以显示它们

问题是您使用的是

LookerCharts.Utils.htmlForCell

，它接受单元格名称引用，例如示例中的secondCell或firstCell。当您将secondCell+firstCell（顺便说一句，在您的示例中可能是“count\u csatcount\u dsat”，因为您添加的是单元格名称，而不是值）馈送给它时，它将变得未定义，因为没有名为“count\u csatcountdsat”的单元格

解决方案（例如过于冗长，不是最好的）是将这些行替换为：

    var firstCell = firstRow[queryResponse.fields.measures[0].name];
    var secondCell =secondRow[queryResponse.fields.measures[1].name];
    var firstCellValue = Number(LookerCharts.Utils.textForCell(firstCell));
    var secondCellValue = Number(LookerCharts.Utils.textForCell(firstCell));

    var totalSat = firstCellValue+secondCellValue;

    // Insert the data into the page
    // This would be unstyled, you'd have to actually construct the HTML string if you wanted it styled
    this._textElement.innerHTML = totalSat;

---

这有意义吗？很高兴解释更多。这是测试Looker定制viz的一个非常好的资源，我强烈推荐。

他想要一个Looker默认不提供的viz