首页 > 解决方案 > 可以用 jsxgraph 制作波特图

问题描述

我正在拼命寻找如何将图表放在 jsxgraph 下以绘制带有 x 轴的图表,该图表以对数方式演变。像这样https://en.wikipedia.org/wiki/Bode_plot

谢谢你的帮助,

标签: plotjsxgraph

解决方案


这是一个如何使用对数垂直轴进行绘图的示例。它改编自 Murray Bourne 的示例,请参阅https://www.intmath.com/cg3/jsxgraph-coding-summary.php。代码如下所示:

const board = JXG.JSXGraph.initBoard('jxgbox', { 
    boundingbox: [-5, 6, 5, -4], axis:false
});

// Vertical axis with logarithmic scale
var attr = JXG.Options.board.defaultAxes.x;
attr.ticks.drawZero = false;
var xAxis = board.create('axis', [[0, 0], [1, 0]], attr);

attr = JXG.Options.axis;
var yAxis = board.create('line', [[0, 0], [0, 1]], attr);

attr = JXG.Options.board.defaultAxes.y.ticks;
attr.drawLabels = true;
attr.drawZero = false;
attr.generateLabelText = function (tick, zero) {
    return (Math.pow(10, Math.round(tick.usrCoords[2] - zero.usrCoords[2]))).toString();
}

var ticksY = board.create('ticks', [yAxis, 1], attr);   

// Plot two functions
var post = (x) => JXG.Math.log10(x); 
var f1 = (x) => x*x;
var f2 = (x) => Math.exp(x);

board.create('functiongraph', [(x) => post(f1(x))], {
  name: 'x^2',
  withLabel: true
});

board.create('functiongraph', [(x) => post(f2(x))], {
  name: 'e^x',
  withLabel: true,
  strokeColor: 'red'
});

在https://jsfiddle.net/4nbajsch/5/现场观看。


推荐阅读