在HTML页面中包含JSXGraph
要使用JSxGraph需要两个文件一个js文件为核心库一个css为样式文件下载地址为
- jsxgraphcore.js from http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js
- jsxgraph.css from http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css
当然你也可以在官网上下载http://jsxgraph.uni-bayreuth.de/wp/ 在这里面找到download
本地页面引入可以使用以下代码
<head>
<link rel="stylesheet" type="text/css" href="jsxgraph.css" />
<script type="text/javascript" src="jsxgraphcore.js"></script>
</head>
在线页面引入可以使用以下代码
<head>
<link rel="stylesheet" type="text/css" href="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraph.css" />
<script type="text/javascript" src="http://jsxgraph.uni-bayreuth.de/distrib/jsxgraphcore.js"></script>
</head>
创建坐标轴面板示例
<div id="box" class="jxgbox" style="width:500px; height:500px;"></div> <script type="text/javascript"> var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true}); </script>
完整代码如下
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" type="text/css" href="css/jsxgraph.css" /> <script type="text/javascript" src="js/jsxgraphcore.js"></script> </head> <div id="box" class="jxgbox" style="width:500px; height:500px;"></div> <script type="text/javascript"> var board = JXG.JSXGraph.initBoard('box', {boundingbox: [-10, 10, 10, -10], axis:true ,showCopyright:false}); </script>