在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>