我想制作一个自定义可视化,将第一行的两个度量值相加并显示出来。为此,我使用了Looker提供的HelloWorld代码,并进行了一些更改(红色文本)。但是我没有得到预期的结果,它只输出 Undefined 。
这是我的代码:
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()
}
});