desmos.api
https://www.desmos.com/api/v1.9/docs/index.html?lang=zh-CN
可修改的空白图表
使用如下代码引用
<script src="https://www.desmos.com/api/v1.9/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
<div id="calculator" style="width: 600px; height: 400px;"></div>
<script>
var elt = document.getElementById('calculator');
var calculator = Desmos.GraphingCalculator(elt);
</script>
其中 dcb31709b452b1cf9dc26972add0fda6 为 Default API
自定义内容引用
首先你要有一个账号，并且在 Desmos 里绘制完成图表并保存
方案一：将上面 Default API 改成自己内容的 API
方案二：使用网页内置的 share as html
此方法使用的 iframe 与博客园不兼容，可能无法正常显示，API 方法需要向 desmos 申请 API，总之不推荐这种方法
此方法引入的图表内容不可修改
内容绘制
在上面提到的引用接口中，实际上可以增加内容
<script src="https://www.desmos.com/api/v1.9/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
<div id="calculator" style="width: 600px; height: 400px;"></div>
<script>
var elt = document.getElementById('calculator');
var calculator = Desmos.GraphingCalculator(elt);
/*在此处增加内容*/
</script>
增加函数
函数直接以调用函数的形式定义，你可以通过调用 calculator.setExpression 来新建函数
对于函数的描述使用 Latex
譬如
calculator.setExpression({id:'graph1', latex:'y=x^2'});
calculator.setExpressions([
{id:'1', latex:'x^2+y^2<25'}
]);
calculator.setExpressions([
{id:'1', latex:'a=1'},
{id:'2', latex:'b=1'},
{id:'3', latex:'y=b\\sin(x+a)', color: Desmos.Colors.GREEN}
]);
这里的 Latex 可以字符串拼接
calculator.setExpression({id:'graph1', latex:'y='+'1'});
全屏
通过定义并传入 options 来实现全屏
var elt = document.getElementById('calculator');
var options = { border: false };
var calculator = Desmos.GraphingCalculator(elt, options);
鼠标控制变量
通过定义 updateVariable 并传入 evt（鼠标信息）来实现
evt.pageX evt.pageY 分别定义了鼠标的横纵坐标（0.0-100.0）
注意这里用同一个 ExpressionId 来重定义一个表达式
<script>
var elt = document.getElementById('calculator');
var calculator = Desmos.GraphingCalculator(elt);
calculator.setExpressions([
{id:'1', latex:'a=1'},
{id:'2', latex:'b=1'},
{id:'3', latex:'y=b\\sin(x+a)', color: Desmos.Colors.GREEN}
]);
var updateVariable = function (evt) {
calculator.setExpression({id:'1', latex:'a='+(evt.pageX/100)});
calculator.setExpression({id:'2', latex:'b='+(evt.pageY/100)});
};
// Register the callback as a listener on mousemove, and use it to
// update the values of a and b.
document.addEventListener('mousemove', updateVariable, true);
</script>
滑块
只需要传入一个 sliderBounds 即可将表达式变成滑块类型
注意能变成滑块类型的一定是形如 x=c 的赋值表达式
<script>
var elt = document.getElementById('calculator');
var calculator = Desmos.GraphingCalculator(elt);
calculator.setExpressions([
{id:'graph1', latex:'y=ax^2'},
{id:'slider1', latex:'a=2', sliderBounds: {min: -3, max: 8, step: 1}}
]);
</script>
点集/函数表格
使用 type='table' 来定义一个函数表格
DragModes 控制能否拖动
一般也用不太到
<script>
var elt = document.getElementById('calculator');
var calculator = Desmos.GraphingCalculator(elt);
calculator.setExpression({
type: 'table',
columns: [
{
latex: 'x',
values: ['1', '2', '3', '4', '5']
},
{
latex: 'y',
values: ['1', '4', '9', '16', '25'],
dragMode: Desmos.DragModes.XY
},
{
latex: 'x^2',
color: Desmos.Colors.BLUE,
columnMode: Desmos.ColumnModes.LINES
}
]
});
</script>
选点
<script>
var elt = document.getElementById('calculator');
var calculator = Desmos.GraphingCalculator(elt);
var xvalues = ['1'];
var yvalues = ['1'];
function updateTable () {
calculator.setExpression({
id: 'table1',
type: 'table',
columns: [
{latex: 'x', values: xvalues},
{latex: 'y', values: yvalues}
]
});
}
updateTable();
function inRectangle(point, rect) {
return (
point.x >= rect.left &&
point.x <= rect.right &&
point.y <= rect.top &&
point.y >= rect.bottom
)
}
elt.addEventListener('click', function (evt) {
var rect = elt.getBoundingClientRect();
var x = evt.clientX - rect.left;
var y = evt.clientY - rect.top;
// Note, pixelsToMath expects x and y to be referenced to the top left of
// the calculator's parent container.
var mathCoordinates = calculator.pixelsToMath({x: x, y: y});
if (!inRectangle(mathCoordinates, calculator.graphpaperBounds.mathCoordinates)) return;
xvalues.push(mathCoordinates.x.toPrecision(2));
yvalues.push(mathCoordinates.y.toPrecision(2));
updateTable();
});
</script>
其他注意事项
- 为了防止渲染出错，你必须在每个表格前都声明如下两行（参数可以自己调）：
<script src="https://www.desmos.com/api/v1.9/calculator.js?apiKey=dcb31709b452b1cf9dc26972add0fda6"></script>
<div id="calculator" style="width: 600px; height: 400px;"></div>
- 一般一篇文章最多一个图像，否则可能会出现问题
