functiondrawViz(vizData){varheight=dscc.getHeight();varwidth=dscc.getWidth();console.log(vizData);// this is where you write your viz code}dscc.subscribeToData(drawViz,{transform:dscc.objectTransform})
编写社区可视化图表时,需注意以下几个关键点。
当数据、样式或 iframe 大小发生更改时,subscribeToData 函数会进行更新。
例如:
// create and add the canvas// do this one timevarcanvasElement=document.createElement('canvas');varctx=canvasElement.getContext('2d');canvasElement.id='myViz';document.body.appendChild(canvasElement);functiondrawViz(data){// clear the canvasvarctx=canvasElement.getContext('2d');ctx.clearRect(0,0,canvasElement.width,canvasElement.height);// viz code goes here}
Looker Studio 会加载并运行 JavaScript 文件,而不是 HTML。所有 DOM 操作
需要通过 JavaScript 执行
例如:以下代码定义了 div 并将其附加到 DOM。
// create and add the canvasvarchartElement=document.createElement('div');chartElement.id='myViz';document.body.appendChild(chartElement);
打包代码
Looker Studio 社区可视化图表仅允许您加载一种 JavaScript
文件。已上传的代码应该是包含 dscc 帮助程序库、任何 JavaScript 可视化库以及您的可视化图表代码的单个文件。
[null,null,["最后更新时间 (UTC):2025-07-25。"],[[["\u003cp\u003eCommunity Visualizations are currently in Developer Preview, offering a way to create custom visualizations using JavaScript and the Looker Studio helper library.\u003c/p\u003e\n"],["\u003cp\u003eVisualizations should be written in JavaScript, utilizing the \u003ccode\u003esubscribeToData\u003c/code\u003e function from the helper library to render data and handle updates, ensuring the canvas is cleared on each redraw to prevent visual stacking.\u003c/p\u003e\n"],["\u003cp\u003eAll visualization code, including external libraries and the Looker Studio helper library, must be bundled into a single JavaScript file for upload.\u003c/p\u003e\n"],["\u003cp\u003eA manifest file (\u003ccode\u003emanifest.json\u003c/code\u003e) is required to provide metadata and resource locations for the visualization, with the \u003ccode\u003edevMode\u003c/code\u003e parameter controlling caching behavior during development and deployment.\u003c/p\u003e\n"],["\u003cp\u003eAfter development, the visualization can be hosted to make it accessible within Looker Studio reports.\u003c/p\u003e\n"]]],[],null,["# Writing your visualization\n\n| **Note:** The Community Visualization feature is in \"Developer Preview\". To learn more about upcoming features and improvements during this period visit the [Developer Preview](/looker-studio/visualization/developer-preview) page.\n\nWriting the visualization code\n------------------------------\n\nThe Looker Studio helper library provides an interface between you and Looker\nStudio. To use the library, provide a callback function that renders the\nvisualization.\n\nThe most salient function in the library is `subscribeToData`, which takes two\narguments: a `callback` function that renders the visualization, and an\n`options` object that specifies what kind of transform you'd like your data to\ntake. To learn more, review the [library reference](/looker-studio/visualization/library-reference).\n\nThe following provides an outline of what your visualization JavaScript could\nlook like. \n\n function drawViz(vizData){\n var height = dscc.getHeight();\n var width = dscc.getWidth();\n console.log(vizData);\n // this is where you write your viz code\n }\n\n dscc.subscribeToData(drawViz, {transform: dscc.objectTransform})\n\nThere are a few key things to keep in mind when writing a community\nvisualization.\n\nUpdates from the `subscribeToData` function occur when the data, styling, or\niframe size changes.\n| **Key Point:** The `drawViz()` function should clear the canvas each time it is called. Otherwise, it may continuously append visualizations to the iframe.\n\nFor example: \n\n // create and add the canvas\n // do this one time\n var canvasElement = document.createElement('canvas');\n var ctx = canvasElement.getContext('2d');\n canvasElement.id = 'myViz';\n document.body.appendChild(canvasElement);\n\n function drawViz(data){\n // clear the canvas\n var ctx = canvasElement.getContext('2d');\n ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);\n\n // viz code goes here\n\n }\n\nLooker Studio loads and runs JavaScript files, not HTML. All DOM manipulation\nneeds to happen through JavaScript.\n\nFor example: the following code defines and appends a `div` to the DOM. \n\n // create and add the canvas\n var chartElement = document.createElement('div');\n chartElement.id = 'myViz';\n document.body.appendChild(chartElement);\n\nBundling the code\n-----------------\n\nLooker Studio community visualizations only allow you to load one JavaScript\nfile. The uploaded code should be a single file that includes the dscc\n[helper library](/looker-studio/visualization/library), any JavaScript visualization libraries, and your visualization\ncode.\n\nTo do this in bash, you can use the `cat` command, like below. \n\n cat dscc.min.js vizLibrary.js myVizSource.js \u003e myViz.js\n\nDefining the manifest\n---------------------\n\nThe visualization manifest file provides metadata about the visualization, as\nwell as information about the location of visualization resources. The location\nof the manifest file is referred to as the \"component ID\", and used to load a\ncommunity visualization.\n\nReview the manifest reference to see a [sample manifest](/looker-studio/visualization/manifest-reference#example_manifestjson_manifest_file).\n| **Note:** The name of the manifest must be `manifest.json`\n\nThe `devMode` parameter of the manifest determines the caching behavior of the\nvisualization. While developing the visualization, `devMode` should be `true` to\nensure that hard refreshes load the latest version of the resources. Once the\ncode is stable, `devMode` should be `false` to ensure that reports with\ncommunity visualizations load quickly. To learn more about caching, see the\n[caching advanced guide](/looker-studio/visualization/caching).\n\nNext steps\n----------\n\nNow that you have the code for your visualization written, learn how to\n[host your visualization](/looker-studio/visualization/upload-viz)."]]