如何在无网格的JSXGraph画板中创建带指定数字的无刻度坐标轴？

直接上可运行的解决方案，核心思路是隐藏默认刻度，手动添加自定义标签：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.9.2/jsxgraph.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jsxgraph/1.9.2/jsxgraphcore.js"></script>
</head>
<body>
    <div id="jxgbox" style="width:600px; height:400px;"></div>

    <script type="text/javascript">
        // 初始化画板，关闭网格
        const board = JXG.JSXGraph.initBoard('jxgbox', {
            showGrid: false,
            axis: false // 先关闭默认坐标轴，后续手动创建
        });

        // 创建自定义X轴：无刻度线，无默认标签
        const xAxis = board.create('axis', [[0,0], [100,0]], {
            ticks: {
                visible: false, // 隐藏默认刻度线和标签
                drawZero: false
            },
            strokeColor: '#333',
            strokeWidth: 2
        });

        // 定义要显示的自定义刻度值
        const customTicks = [25, 50, 75, 100];

        // 遍历添加自定义标签
        customTicks.forEach(val => {
            board.create('text', [
                val, 0, // 标签位置（对应轴上的坐标）
                val.toString() // 显示的文字
            ], {
                anchorX: 'middle', // 水平居中对齐
                anchorY: 'top', // 垂直向上对齐，放在轴下方
                fontSize: 14,
                strokeColor: '#000'
            });
        });

        // 同理可创建Y轴，逻辑完全一致
        const yAxis = board.create('axis', [[0,0], [0,100]], {
            ticks: {
                visible: false,
                drawZero: false
            },
            strokeColor: '#333',
            strokeWidth: 2
        });

        const yCustomTicks = [25, 50, 75, 100];
        yCustomTicks.forEach(val => {
            board.create('text', [
                0, val,
                val.toString()
            ], {
                anchorX: 'right', // 水平向右对齐，放在轴左侧
                anchorY: 'middle',
                fontSize: 14,
                strokeColor: '#000'
            });
        });
    </script>
</body>
</html>

关键细节说明 #

• 初始化画板时showGrid: false直接关闭网格，axis: false避免加载默认坐标轴，方便完全自定义。
• 创建坐标轴时通过ticks: {visible: false}隐藏所有默认刻度线和标签，只保留轴线本身。
• 用board.create('text')手动添加自定义标签，通过anchorX和anchorY控制标签和轴线的相对位置，保证对齐美观。
• 如果需要调整标签位置，比如X轴标签想放在轴上方，把anchorY改成bottom即可。

内容的提问来源于stack exchange，提问作者Matthias Geissbuehler