How to display CanvasJS graph using VS Code Extension
Question
I am trying to develop a VS Code extension that will display some graphs i made using CanvasJS. The issue I am facing is as follows: I do not know how to run the HTML file without using "go Live" or something like that.
I suspect what I might have to do is make a command that, when inputted, runs the correct HTML file. I just have simply never done anything like this. Would I perhaps have to somehow caputure what commands are used to normally run the HTML file? and then somehow link a command in the extension to the commands that run the HTML file?
any advice on how to do this would be greatly appreciated. Or perhaps information on anything similar to it at all.
1 answers
solution1
0 2022-08-23 07:22:45
You cannot "run" an HTML file. You have to return the HTML content in text form to the webview panel as demonstrated in this webview provider . Such HTML content can load scripts and generate graphs as shown in this code. Here's the main part of it:
const diagram = `<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
${this.generateContentSecurityPolicy()}
${this.getStyles(webView)}
<base target="_blank">
<script src="${graphLibPath}"></script>
<script>
let parseTreeRenderer;
let graphExport;
</script>
</head>
<body>
<div class="header"><span class="parse-tree-color"><span class="graph-initial">Ⓟ</span>arse Tree</span>
<span class="action-box">
Tree
<span class="switch">
<span class="switch-border">
<input id="switch1" type="checkbox" onClick="parseTreeRenderer.toggleTreeType(this)"/>
<label for="switch1"></label>
<span class="switch-handle-top"></span>
</span>
</span>
Cluster
Horizontal
<span class="switch">
<span class="switch-border">
<input id="switch2" type="checkbox"
onClick="parseTreeRenderer.toggleOrientation(this)"/>
<label for="switch2"></label>
<span class="switch-handle-top"></span>
</span>
</span>
Vertical
<a onClick="parseTreeRenderer.changeNodeSize(0.9);">
<span class="parse-tree-color" style="font-size: 120%; font-weight: 800;
cursor: pointer; vertical-align: middle;">-</span>
</a>
Node Size
<a onClick="parseTreeRenderer.changeNodeSize(1.1);">
<span class="parse-tree-color" style="font-size: 120%; font-weight: 800; cursor: pointer;
vertical-align: middle;">+</span>
</a>
Save to SVG
<a onClick="graphExport.exportToSVG('parse-tree', '${basename(uri.fsPath)}');">
<span class="parse-tree-save-image" />
</a>
</span>
</div>
<svg></svg>
<script type="module">
import { ParseTreeRenderer } from "${rendererScriptPath}";
import { GraphExport } from "${exportScriptPath}";
// Register a listener for data changes.
window.addEventListener("message", (event) => {
switch (event.data.command) {
case "updateParseTreeData": {
parseTreeRenderer.loadNewTree({ parseTreeData: event.data.treeData });
break;
}
default:
}
});
parseTreeRenderer = new ParseTreeRenderer();
graphExport = new GraphExport();
parseTreeRenderer.loadNewTree({
parseTreeData: ${JSON.stringify(graph)},
useCluster: ${clustered.toString()},
horizontal: ${horizontal.toString()},
width: 1000,
height: 1000,
initialScale: 0.75,
initialTranslateX: ${horizontal ? 200 : 500},
initialTranslateY: ${horizontal ? 400 : 50},
});
parseTreeRenderer.initSwitches();
</script>
</body>
</html>`;
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.