彩票走势图

流程图控件GoJS教程:调整图表大小

翻译|使用教程|编辑:吴园园|2020-05-12 11:52:28.983|阅读 1241 次

概述:有时可能需要调整包含GoJS图表的div的大小。GoJS不会监听或尝试检测div大小的变化,因此在执行调整其包含div大小的操作时,必须手动告诉每个图表。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

GoJS是一款功能强大,快速且轻量级的流程图控件,可帮助你在JavaScript 和HTML5 Canvas程序中创建流程图,且极大地简化您的JavaScript / Canvas 程序。

点击下载GoJS最新使用版

使用Diagram.requestUpdate调整Div的大小

以下示例具有一个按钮,该按钮可放大图的div。单击时,将明显调整div的大小,但图保持不变。

    // A minimal Diagram
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3 },  // some room around the text
          new go.Binding("text", "key"))
      );

    diagram.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: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);

    // Resize the diagram with this button
    var button1 = document.getElementById('button1');
    button1.addEventListener('click', function() {
      var div = diagram.div;
      div.style.width = '200px';
    });

通常,我们会希望在div调整大小的同时,将Diagram调整为其div的大小。为此,我们在调整div的大小后向Diagram.requestUpdate 添加了一个调用。这将检查图的div是否已更改大小,如果已更改,则以适当的新尺寸重新绘制图。

除了添加了对Diagram.requestUpdate的调用之外,以下代码几乎相同。

    // A minimal Diagram
    diagram.nodeTemplate =
      $(go.Node, "Auto",
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 3 },  // some room around the text
          new go.Binding("text", "key"))
      );

    diagram.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: "Gamma", to: "Delta" },
      { from: "Delta", to: "Alpha" }
    ]);

    // Resize the diagram with this button
    var button2 = document.getElementById('button2');
    button2.addEventListener('click', function() {
      var div = diagram.div;
      div.style.width = '200px';
      diagram.requestUpdate(); // Needed!
    });

====================================================

想要购买GoJS正版授权的朋友可以

有关产品的最新消息和最新资讯,欢迎扫描关注下方微信公众号

流程图控件GoJS教程:调整图表大小


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP