使用GoJS渲染图表时出现浏览器不支持Canvas提示的问题求助

问题描述 #

我用GoJS在页面搭建简单图表，代码如下：

const $ = go.GraphObject.make;  // for conciseness in defining templates
const myDiagram =
  $(go.Diagram, "myDiagramDiv",  // create a Diagram for the DIV HTML element
    { // enable undo & redo
      "undoManager.isEnabled": true
    });

// define a simple Node template
myDiagram.nodeTemplate =
  $(go.Node, "Auto",  // the Shape will go around the TextBlock
    $(go.Shape, "RoundedRectangle",
      { strokeWidth: 0, fill: "white" },  // default fill is white
      // Shape.fill is bound to Node.data.color
      new go.Binding("fill", "color")),
    $(go.TextBlock,
      { margin: 8 },  // some room around the text
      // TextBlock.text is bound to Node.data.key
      new go.Binding("text", "key"))
  );

// but use the default Link template, by not setting Diagram.linkTemplate

// create the model data that will be represented by Nodes and Links
myDiagram.model = new go.GraphLinksModel(
[
  { key: "Alpha", color: "lightblue" },
  { key: "Beta", color: "orange" },
  { key: "Gamma", color: "lightgreen" },
  { key: "Delta", color: "pink" }
],
[
  { from: "Alpha", to: "Beta" },
  { from: "Alpha", to: "Gamma" },
  { from: "Beta", to: "Beta" },
  { from: "Gamma", to: "Delta" },
  { from: "Delta", to: "Alpha" }
]);

渲染后Canvas标签内出现提示文本：“This text is displayed if your browser does not support the Canvas HTML element.”。已确认Chrome、Firefox、Edge都是最新版，直接用Canvas绘图正常，求问题原因。

可能的原因及解决方法 #

• GoJS库未正确加载：
  检查页面是否正确引入GoJS脚本文件。CDN引入的话确认URL有效；本地引入则检查文件路径是否正确，查看控制台是否有404报错。GoJS未加载时无法正常初始化Canvas，会显示默认的不支持提示。
• 容器DIV不存在或尺寸为0：
  确保页面存在ID为myDiagramDiv的DIV元素，且给它设置明确的宽高样式（比如width: 600px; height: 400px; border: 1px solid black;）。容器尺寸为0时，GoJS无法渲染Canvas内容，会保留默认提示文本。
• 代码执行时机不对：
  将GoJS初始化代码放在DOM加载完成后执行，比如用DOMContentLoaded事件包裹，或者把代码放在页面底部。若DOM未加载就执行代码，myDiagramDiv还不存在，GoJS无法正确挂载，导致Canvas未被初始化。
• GoJS版本兼容性问题：
  尝试更换GoJS版本，比如使用最新稳定版或回退到已知兼容的版本。部分版本可能在特定浏览器环境下存在初始化异常。

内容的提问来源于stack exchange，提问作者Ivan Sudos