如何在 JSXGraph 中使用 MathJax 作为刻度标签

Question

我正在使用 JSXGraph 并想使用 MathJax 将轴刻度标记为分数。例如，\(\frac{1}{2}\)

不知道该怎么做。

Answer 1

请允许我给出更长一点的答案。

如果你只想用 MathJax 数学字体显示刻度标签，可以像下面那样为 y-axis:

 var board = JXG.JSXGraph.initBoard('jxgbox', {
     boundingbox: [-0.1, 3, 1, -3],
     axis: true,
     defaultAxes: {
         y: {
             ticks: {
                 label: {
                     fontSize: 18,
                     display: 'html',
                     cssStyle: 'font-family: MJXZERO, MJXTEX',
                     offset: [-10, -5]
                 }
             }
         }
     }
 });

重要的属性是display:'html'和cssStyle: 'font-family: MJXZERO, MJXTEX',。当然，您必须包含 MathJax JavaScript 库。

如果你想用MathJax来显示标签，可以这样做（对于x-axis）：

  const board = JXG.JSXGraph.initBoard('jxgbox', {
      boundingbox: [-1, 10, 11, -2],
      axis: true,
      defaultAxes: {
        x: {
            ticks: {
                label: {
                    fontSize: 15,
                    parse: false,
                    useMathJax: true,
                    display: 'html'
                },
                generateLabelText: (tick) => {
                    return '\(' + tick.usrCoords[1].toFixed(0) + '\)';
                }
            }
        }
      }
  });

最后，回到您最初的问题：最好的方法似乎是生成新的固定报价，类似于 2):

 const board = JXG.JSXGraph.initBoard('jxgbox', {
     boundingbox: [-0.1, 3, 1, -3],
     axis: true,            
     defaultAxes: {
         x: {
             ticks: {
                   visible: false,
                 drawLabels: false,
             }
         },
         y: {
             ticks: {
                 label: {
                     fontSize: 18,
                     parse: false,
                     display: 'html',
                     CssStyle: 'font-family: MJXZERO, MJXTEX',
                     offset: [-10, -5]
                 }
             }
         }
     }
 });

 board.create('ticks', [board.defaultAxes.x, [0.25, 0.5, 0.75]], {
     drawLabels: true,
     label: {
         fontSize: 20,
         parse: false,
         useMathJax: true,
         display: 'html',
         offset: [-10, -25]
     },
     generateLabelText: (tick) => {
         var v = tick.usrCoords[1];
         switch (v) {
             case 0.25:
                 return '\(\frac{1}{4}\)';
             case 0.5:
                 return '\(\frac{1}{2}\)';
             case 0.75:
                 return '\(\frac{3}{4}\)';
         }

     }
 });

您可以看到 1) 和 2) 住在 https://jsfiddle.net/ba8xh9jz/1/ and 3) at https://jsfiddle.net/ba8xh9jz/2/。

如何在 JSXGraph 中使用 MathJax 作为刻度标签

How do I use MathJax for tick labels in JSXGraph

jsxgraph