现在开始学习 mxGraph,发现相关文档或者学习资料非常少,下边的例子是一个 hello world,中间添加了很多中文注释,在页面呈现状态如下:
<html>
<head>
<title>Hello, World! example for mxGraph</title>
<!-- 设置库的基本路径,如果不在同一目录中 -->
<script type="text/javascript">
mxBasePath = '../src';
</script>
<!-- 加载并初始化库 -->
<script type="text/javascript" src="../src/js/mxClient.js"></script>
<!-- 示例代码 -->
<script type="text/javascript">
//程序从这里开始 在中创建一个示例图
//具有指定ID的DOM节点。调用此函数
//来自文档的onLoad事件处理程序(见下文)
function main(container)
{
// 检查浏览器是否受支持
if (!mxClient.isBrowserSupported())
{
mxUtils.error('Browser is not supported!', 200, false);
}
else
{
// 在给定容器内创建图形
var graph = new mxGraph(container);
// 启用橡皮筋选择
new mxRubberband(graph);
//获取插入新单元格的默认父级。这个
//通常是根的第一个子节点(即第0层)
var parent = graph.getDefaultParent();
//只需一步即可将单元格添加到模型中
graph.getModel().beginUpdate();
try
{
var v1 = graph.insertVertex(parent, null,
'Hello,', 20, 20, 80, 30);
var v2 = graph.insertVertex(parent, null,
'World!', 200, 150, 80, 30);
var e1 = graph.insertEdge(parent, null, '', v1, v2);
}
finally
{
// 更新显示
graph.getModel().endUpdate();
}
}
};
</script>
</head>
<!-- Page将图表的容器传递给程序 -->
<body onload="main(document.getElementById('graphContainer'))">
<!-- 使用网格壁纸为图形创建容器 -->
<div id="graphContainer"
style="overflow:hidden;width:321px;height:241px;background:url('editors/images/grid.gif')">
</div>
</body>
</html>